AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue3 源码学习，实现一个 mini-vue（九）：构建 renderer 渲染器之 ELEMENT 节点的各种属性挂载

2023-01-09 266
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue3 源码学习，实现一个 mini-vue（九）：构建 renderer 渲染器之 ELEMENT 节点的各种属性挂载

highlight: vs2015

theme: juejin

前言

原文来自 我的个人博客

在前几章中，我们实现了 ELEMENT 节点的挂载、更新以及删除等操作。

但是我们的代码现在还只能挂载 class 属性，而不能挂载其他属性。本章我们就来实现一下其他属性的挂载（ style 属性，事件 属性）

1. 源码阅读：vue3 是如何挂载其他属性的

我们从下面的测试实例开始阅读源码：

<script>
  const { h, render } = Vue

  const vnode = h('textarea', {
    class: 'test-class',
    value: 'textarea value',
    type: 'text'
  })
  // 挂载
  render(vnode, document.querySelector('#app'))
</script>

在这个测试实例中，我们为 textarea 挂载了三个属性 class、value 和 type，根据之前的源码阅读我们知道，属性的挂载是在 packages/runtime-dom/src/patchProp.ts 中的 patchProp 方法处进行的。

所以我们可以直接在这里进行 debugger，因为我们设置了三个属性，所以会 执行三次，我们一个一个来看：

  1. 第一次进入 patchProp：

image.png

  1. 可以看到，代码首先会执行 patchClass，而在 patchClass 中最终会执行 el.className = value。至此 class 设置完成。
  2. 第二次进入 patchProp：

image.png

  1. 可以看到代码前三个 if 都会跳过，而在第四个 if 时，会执行 shouldSetAsProp(el, key, nextValue, isSVG)，其实这个方法会返回 false，最终还是执行 else 中的代码，在 else 中最终会执行 patchAttr 方法:

image.png

  1. patchAttr 最终执行 el.setAttribute(key, isBoolean ? '' : value) 设置 type
  2. 至此 type 设置完成
  3. 第三次进入 patchProp：

image.png

  1. 可以看到第三次进入最后执行的是 patchDOMProp，这个方法最后是通过 执行 el[key] = value 设置 value，完成 value 属性的设置的
  2. 至此 value 设置完成
  3. 至此三个属性全部设置完成。

总结：

由以上代码可知：

  1. 针对于三个属性，vue 通过了 三种不同的方式 来进行了设置：
  2. class 属性：通过 el.className 设定
  3. textarea 的 type 属性：通过 el.setAttribute 设定
  4. textarea 的 value 属性：通过 el[key] = value 设定

至于 vue 为什么要通过三种不同的形式挂载属性，主要有以下两点原因：

  1. 首先 HTML Attributes 和 DOM Properties 想要成功的进行各种属性的设置，就需要 针对不同属性，通过不同方式 完成，例如：
// 修改 class
el.setAttribute('class', 'm-class') // 成功
el['class'] = 'm-class' // 失败
el.className = 'm-class' // 成功

上面同样是修改 class，通过 HTML Attributes 的方式使用 setAttribute 就可以成功，通过 el['class'] 就会失败，因为在 DOM Properties 中，修改 class 要通过 el['className']`

  1. 还有出于性能的考虑，比如 className 和 setAttribute('class', '')，className 的性能会更高

2. 代码实现：区分处理 ELEMENT 节点的各种属性挂载

  1. 在 packages/runtime-dom/src/patchProp.ts 中，增加新的判断条件：
export const patchProp = (el, key, prevValue, nextValue) => {
  ...
  else if (shouldSetAsProp(el, key)) {
    // 通过 DOM Properties 指定
    patchDOMProp(el, key, nextValue)
  } else {
    // 其他属性
    patchAttr(el, key, nextValue)
  }
}
  1. 在 packages/runtime-dom/src/patchProp.ts 中，创建 shouldSetAsProp 方法：
/**
 * 判断指定元素的指定属性是否可以通过 DOM Properties 指定
 */
function shouldSetAsProp(el: Element, key: string) {
  // #1787, #2840 表单元素的表单属性是只读的，必须设置为属性 attribute
  if (key === 'form') {
    return false
  }

  // #1526 <input list> 必须设置为属性 attribute
  if (key === 'list' && el.tagName === 'INPUT') {
    return false
  }

  // #2766 <textarea type> 必须设置为属性 attribute
  if (key === 'type' && el.tagName === 'TEXTAREA') {
    return false
  }

  return key in el
}
  1. 在 packages/runtime-dom/src/modules/props.ts 中，增加 patchDOMProp 方法：
/**
 * 通过 DOM Properties 指定属性
 */
export function patchDOMProp(el: any, key: string, value: any) {
  try {
    el[key] = value
  } catch (e: any) {}
}
  1. 在 packages/runtime-dom/src/modules/attrs.ts 中，增加 patchAttr 方法：
/**
 * 通过 setAttribute 设置属性
 */
export function patchAttr(el: Element, key: string, value: any) {
  if (value == null) {
    el.removeAttribute(key)
  } else {
    el.setAttribute(key, value)
  }
}

至此，代码完成。

创建测试实例 packages/vue/examples/runtime/render-element-props.html：

<script>
  const { h, render } = Vue

  const vnode = h('textarea', {
    class: 'test-class',
    value: 'textarea value',
    type: 'text'
  })
  // 挂载
  render(vnode, document.querySelector('#app'))
</script>

测试渲染成功。

3. 源码阅读：style 属性的挂载和更新

创建测试实例阅读源码：

<script>
  const { h, render } = Vue

  const vnode = h(
    'div',
    {
      style: {
        color: 'red'
      }
    },
    '你好，世界'
  )
  // 挂载
  render(vnode, document.querySelector('#app'))

  setTimeout(() => {
    const vnode2 = h(
      'div',
      {
        style: {
          fontSize: '32px'
        }
      },
      '你好，世界'
    )
    // 挂载
    render(vnode2, document.querySelector('#app'))
  }, 2000)
</script>

我们继续在 patchProp 方法中，跟踪源码实现：

  1. 第一次进入 patchProp，执行 挂载 操作：

image.png

  1. 可以看到在 patchProp 方法中会进入 patchStyle 方法，而 patchStyle 经过判断会进入 setStyle ,我们进入 setStyle 方法：

image.png

  1. 在 setStyle 中，最后执行 style[prefixed as any] = val ，直接为 style 对象进行赋值操作，至此 style 属性 挂载完成
  2. 接下来延迟两秒之后就开始 style 的 更新操作：
  3. 忽略掉相同的挂载逻辑，代码执行到 patchStyle 方法下：

image.png

  1. 可以看到此时 会执行 setStyle(style,key,'')，再次进入 setStyle，此时 val 为 ''，最后会执行 style['color'] = ''，完成 清理旧样式 操作。
  2. 至此 更新 操作完成

总结：

由以上代码可知：

  1. 整个 style 赋值的逻辑还是比较简单的
  2. 在 不考虑边缘情况 的前提下，vue 只是对 style 进行了 缓存 和 赋值 两个操作
  3. 缓存是通过 prefixCache = {} 进行
  4. 赋值则是直接通过 style[xxx] = val 进行

4. 代码实现：style 属性的更新和挂载

  1. 在 packages/runtime-dom/src/patchProp.ts 中，处理 style 情况：
/**
* 为 prop 进行打补丁操作
*/
export const patchProp = (el, key, prevValue, nextValue) => {
  ......
  else if (key === 'style') {
    // style
    patchStyle(el, prevValue, nextValue)
  } 
  ......
}
  1. 在 packages/runtime-dom/src/modules/style.ts 中，新建 patchStyle 方法：
import { isString } from '@vue/shared'

/**
 * 为 style 属性进行打补丁
 */
export function patchStyle(el: Element, prev, next) {
  // 获取 style 对象
  const style = (el as HTMLElement).style
  // 判断新的样式是否为纯字符串
  const isCssString = isString(next)
  if (next && !isCssString) {
    // 赋值新样式
    for (const key in next) {
      setStyle(style, key, next[key])
    }
    // 清理旧样式
    if (prev && !isString(prev)) {
      for (const key in prev) {
        if (next[key] == null) {
          setStyle(style, key, '')
        }
      }
    }
  }
}

/**
 * 赋值样式
 */
function setStyle(
  style: CSSStyleDeclaration,
  name: string,
  val: string | string[]
) {
  style[name] = val
}

代码完成

创建测试实例 packages/vue/examples/runtime/render-element-style.html：

<script>
  const { h, render } = Vue

  const vnode = h(
    'div',
    {
      style: {
        color: 'red'
      }
    },
    '你好，世界'
  )
  // 挂载
  render(vnode, document.querySelector('#app'))

  setTimeout(() => {
    const vnode2 = h(
      'div',
      {
        style: {
          fontSize: '32px'
        }
      },
      '你好，世界'
    )
    // 挂载
    render(vnode2, document.querySelector('#app'))
  }, 2000)
</script>

效果：

页面刷新，两秒钟后样式更新。

3.gif

5. 源码阅读：事件的挂载和更新

我们通过如下测试用例来阅读 vue 源码：

<script>
  const { h, render } = Vue

  const vnode = h(
    'button',
    {
      onClick() {
        alert('点击')
      }
    },
    '点击'
  )
  // 挂载
  render(vnode, document.querySelector('#app'))

  setTimeout(() => {
    const vnode2 = h(
      'button',
      {
        onDblclick() {
          alert('双击')
        }
      },
      '双击'
    )
    // 挂载
    render(vnode2, document.querySelector('#app'))
  }, 2000)
</script>

上面代码很简单就是页面刚渲染时挂载 点击事件，两秒钟之后更新为 双击事件

  1. 我们依然来到 patchProps 方法:

image.png

  1. 此时会进入 patchEvent 方法中：

image.png

  1. 在 patchEvent 中，

    1. 首先创建了一个 invokers 对象并绑定到了 el._wei 上，这是个用于缓存的对象，我们可以不用管，他目前只是一个空对象。
    2. 然后又执行 existingInvoker = invokers[rawName]，rawName 此时为 'onClick' 这就是想从缓存中取出之前已经缓存过得 onClick 事件函数，我们目前没缓存过，所以是 undefined，所以程序会执行下面的 else
    3. 可以看到最后会执行 addEventListener 的方法，这个方法就是最终挂载事件的方法。但是我们会有个疑问这个 invoker 是什么东西呢？我们代码进入 82 行 createInvoker:

image.png

  1. 由上图我们知道 invoker 就是一个函数，它的 value 属性是当前 onClick 函数
  2. 创建完 invoker 对象后，会执行 invokers[rawName]，也就是缓存下来。
  3. 至此，支持事件 挂载 完成
  4. 等待两秒之后，执行 更新 操作：
  5. 第二次 进入 patchEvent，会再次挂载 onDblclick 事件与 第一次 相同，此时的 invokers 值为：

image.png

  1. 但是，到这还没完，我们知道 属性的挂载 其实是在 packages/runtime-core/src/renderer.ts 中的 patchProps 中进行的，观察内部方法，我们可以发现 内部进行了两次 for 循环：

image.png

  1. 所以此时还会执行下面的 for 循环来卸载之前的 onClick 事件，我们 第三次 进入到 patchEvent 方法中：

image.png

  1. 这次因为 nextValue 为 null 且 存在 existingInvoker，所以会执行最后的 removeEventListener 即卸载 onClick 事件，最后执行 invokers[rawName] = undefined，删除 onClick 事件的缓存。
  2. 至此 卸载旧事件 完成

总结：

  1. 我们一共三次进入 patchEvent 方法

    1. 第一次进入为 挂载 onClick 行为
    2. 第二次进入为 挂载 onDblclick 行为
    3. 第三次进入为 卸载 onClick 行为
  2. 挂载事件，通过 el.addEventListener 完成
  3. 卸载事件，通过 el.removeEventListener 完成
  4. 除此之外，还有一个 _vei 即 invokers 对象 和 invoker 函数，我们说两个东西需要重点关注，那么这两个对象有什么意义呢？

深入事件更新

在 patchEvent 方法中有一行代码是我们没有讲到的，那就是：

// patch
existingInvoker.value = nextValue

这行代码是用来更新事件的，vue 通过这种方式而不是调用 addEventListener 和 removeEventListener 解决了频繁的删除、新增事件时非常消耗性能的问题。

6. 代码实现：事件的挂载和更新

  1. 在 packages/runtime-dom/src/patchProp.ts 中，增加 patchEvent 事件处理
} else if (isOn(key)) {
  // 事件
  patchEvent(el, key, prevValue, nextValue)
}
  1. 在 packages/runtime-dom/src/modules/events.ts 中，增加 patchEvent、parseName、createInvoker 方法：
/**
 * 为 event 事件进行打补丁
 */
export function patchEvent(
  el: Element & { _vei?: object },
  rawName: string,
  prevValue,
  nextValue
) {
  // vei = vue event invokers
  const invokers = el._vei || (el._vei = {})
  // 是否存在缓存事件
  const existingInvoker = invokers[rawName]
  // 如果当前事件存在缓存，并且存在新的事件行为，则判定为更新操作。直接更新 invoker 的 value 即可
  if (nextValue && existingInvoker) {
    // patch
    existingInvoker.value = nextValue
  } else {
    // 获取用于 addEventListener || removeEventListener 的事件名
    const name = parseName(rawName)
    if (nextValue) {
      // add
      const invoker = (invokers[rawName] = createInvoker(nextValue))
      el.addEventListener(name, invoker)
    } else if (existingInvoker) {
      // remove
      el.removeEventListener(name, existingInvoker)
      // 删除缓存
      invokers[rawName] = undefined
    }
  }
}

/**
 * 直接返回剔除 on，其余转化为小写的事件名即可
 */
function parseName(name: string) {
  return name.slice(2).toLowerCase()
}

/**
 * 生成 invoker 函数
 */
function createInvoker(initialValue) {
  const invoker = (e: Event) => {
    invoker.value && invoker.value()
  }
  // value 为真实的事件行为
  invoker.value = initialValue
  return invoker
}
  1. 支持事件的打补丁处理完成。

可以创建如下测试实例 packages/vue/examples/runtime/render-element-event.html：

<script>
  const { h, render } = Vue

  const vnode = h(
    'button',
    {
      onClick() {
        alert('点击')
      }
    },
    '点击'
  )
  // 挂载
  render(vnode, document.querySelector('#app'))

  setTimeout(() => {
    const vnode2 = h(
      'button',
      {
        onDblclick() {
          alert('双击')
        }
      },
      '双击'
    )
    // 挂载
    render(vnode2, document.querySelector('#app'))
  }, 2000)
</script>

效果：

4.gif

7. 渲染器模块的局部总结

目前我们已经完成了针对于 ELEMENT 的：

  1. 挂载
  2. 更新
  3. 卸载

  4. patch props 打补丁

    1. class
    2. style
    3. event
    4. attr

等行为的处理。

针对于 挂载、更新、卸载 而言，我们主要使用了 packages/runtime-dom/src/nodeOps.ts 中的浏览器兼容方法进行的实现，比如：

  1. doc.createElement
  2. parent.removeChild

等等。

而对于 patch props 的操作而言，因为 HTML Attributes 和 DOM Properties 不同的问题，所以我们需要针对不同的 props 进行分开的处理。

而最后的 event，本身并不复杂，但是 vei 的更新思路也是非常值得学习的一种事件更新方案。

至此，针对于 ELEMENT 的处理终于完成啦~

接下来是 Text 、Comment 以及 Component 的渲染行为。

文章标签：
JavaScript
测试技术
缓存
关键词：
构建VUE.js
VUE.js属性
vue3属性VUE.js
element VUE.js
vue3 element VUE.js
前端要努力QAQ
目录
相关文章
龙大吉
|
24天前
|
JavaScript 前端开发 持续交付
构建现代Web应用：Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展，Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新，为Web应用的构建提供了更多可能。在本篇文章中，我们将探讨Vue.js和Node.js这两大热门技术如何完美结合，构建现代Web应用。
龙大吉
22 4
我是快乐的嘟嘟
|
23天前
|
监控 JavaScript 前端开发
Vue 异步渲染
【10月更文挑战第23天】Vue 异步渲染是提高应用性能和用户体验的重要手段。通过理解异步渲染的原理和优化策略，我们可以更好地利用 Vue 的优势，开发出高效、流畅的前端应用。同时，在实际开发中，要注意数据一致性、性能监控和调试等问题，确保应用的稳定性和可靠性。
我是快乐的嘟嘟
17 1
G0518
|
1月前
|
存储 JavaScript 前端开发
深入探索 Vue.js：构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js：构建现代 Web 应用的利器
G0518
21 1
chnjames
|
1月前
|
JavaScript 前端开发 UED
Vue 组件设计：构建生动多彩的树形结构组件
本文介绍了如何使用 Vue 构建一个功能强大的树形结构组件。该组件支持递归渲染节点及其子节点，提供了自定义节点颜色、文本和布局的功能。通过独特的样式处理不同层级的节点，展示出丰富的视觉效果。组件还支持动态布局和缩放，确保灵活的界面展示和用户体验。文章提供了详细的代码实现，包括 HTML、JavaScript 和 SCSS，帮助开发者快速集成和定制自己的树形结构组件。
chnjames
133 0
Vue 组件设计：构建生动多彩的树形结构组件
有路有乔-六月
|
1月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
有路有乔-六月
24 2
有路有乔-六月
|
1月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
有路有乔-六月
18 1
G0518
|
1月前
|
监控 JavaScript 前端开发
深入了解Vue.js：构建现代前端应用的利器
【10月更文挑战第11天】深入了解Vue.js：构建现代前端应用的利器
G0518
15 0
我是快乐的嘟嘟
|
9天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
87 26
html的七十二变
|
9天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
31 8
html的七十二变
|
9天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
26 7

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 4
    自制简单的range（Vue）
  • 5
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 6
    vite原理之解析.vue文件
  • 7
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 8
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 9
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 10
    简单vue父子iframe页面之间跨域通信传值postMessage()
  • 1
    vue代码优化方案
    57
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    140
  • 3
    在Vue中，子组件向父组件传递数据
    77
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    98
  • 5
    【vue3】vue3中路由hash与History的设置
    220
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1162
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    489
  • 8
    【vue】 vue2 监听滚动条滚动事件
    146
  • 9
    【天地图】vue 天地图 T is not defined
    182
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    643

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Node.js 入门教程文档
  • Node.js 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云OSS设置跨域访问