Vue.js 3 的设计思路笔记

声明式地描述 UI

前端页面都涉及哪些内容，具体如下。

  • DOM 元素：例如是 div 标签还是 a 标签。
  • 属性：如 a 标签的 href 属性，再如 id、class 等通用属性。
  • 事件：如 click、keydown 等。
  • 元素的层级结构：DOM 树的层级结构，既有子节点，又有父节 点。

相应的解决方案是：

  1. 使用模板来声明式地描述 UI:
  1. 使用与 HTML 标签一致的方式来描述 DOM 元素
  2. 使用与 HTML 标签一致的方式来描述属性
  3. 使用 : 或 v-bind 来描述动态绑定的属性
  4. 使用 @ 或 v-on 来描述事件，例如点击事件
  5. 使用与 HTML 标签一致的方式来描述层级结构
  1. 用 JavaScript 对象来描述:(使用 JavaScript 对象描述 UI 更加灵活):
const vnodee = {
// 标签名称:
tag: 'div',
 // 标签属性:props 是一个对象，用来描述 标签的属性、事件等内容
 props: {
 onClick: () => alert('hello')
 },
 // 子节点:children 用来描述标签的子节点
children: [
{ tag: 'span' ,
 props:{},
 children: 'click me'
}
]
 }

对应的模板：

<h1 @click="handler"><span></span></h1>

渲染器

Vue.js 组件都是依赖 渲染器来工作的

Vue.js 3 的设计思路笔记_子节点

​​虚拟 DOM，它其实就是用 JavaScript 对象来描述真实的 DOM 结构。​​

renderer 函数接收如下两个参数。

  • vnode：虚拟 DOM 对象。
  • container：一个真实 DOM 元素，作为挂载点，渲染器会把虚 拟 DOM 渲染到该挂载点下。
function renderer(vnode, container) {
 // 使用 vnode.tag 作为标签名称创建 DOM 元素
const el = document.createElement(vnode.tag)
 // 遍历 vnode.props，将属性、事件添加到 DOM 元素
 for (const key in vnode.props) {
if (/^on/.test(key)) {
 // 如果 key 以 on 开头，说明它是事件
 el.addEventListener(
 key.substr(2).toLowerCase(), // 事件名称 onClick --->
click
 vnode.props[key] // 事件处理函数
)
 }
 }

 // 处理 children
 if (typeof vnode.children === 'string') {
// 如果 children 是字符串，说明它是元素的文本子节点
 el.appendChild(document.createTextNode(vnode.children))
 } else if (Array.isArray(vnode.children)) {
 // 递归地调用 renderer 函数渲染子节点，使用当前元素 el 作为挂载点
 vnode.children.forEach(child => renderer(child, el))
 }

 // 将元素添加到挂载点下
 container.appendChild(el)
 }
//调用 renderer 函数：
renderer(vnode, document.body) // body 作为挂载点

组件的本质

​​组件就是一 组 DOM 元素的封装，这组 DOM 元素就是组件要渲染的内容，因此 我们可以定义一个函数来代表组件，而函数的返回值就代表组件要渲 染的内容​​

const MyComponent = function () {
    return {
tag: 'div',
props: {
 onClick: () => alert('hello')
 },
 children: 'click me'
 }
}

就像 tag: 'div' 用来描述 标签一样，tag: MyComponent 用来描述组件，只不过此时的 tag 属性不是标签名 称，而是组件函数。

修改renderer 函数：

function renderer(vnode, container) {
if (typeof vnode.tag === 'string') {
 // 说明 vnode 描述的是标签元素
mountElement(vnode, container)
 } else if (typeof vnode.tag === 'function') {
// 说明 vnode 描述的是组件
 mountComponent(vnode, container)
 }
 }
  • 如果 vnode.tag 的类型是字符串，说明它描述的是普通标签元 素，此时调用 mountElement 函数完成渲染；
function mountElement(vnode, container) {
 // 使用 vnode.tag 作为标签名称创建 DOM 元素
 const el = document.createElement(vnode.tag)
// 遍历 vnode.props，将属性、事件添加到 DOM 元素
 for (const key in vnode.props) {
 if (/^on/.test(key)) {
// 如果 key 以字符串 on 开头，说明它是事件
el.addEventListener(
 key.substr(2).toLowerCase(), // 事件名称 onClick --->
click
vnode.props[key] // 事件处理函数
 )
 }
 }

 // 处理 children
 if (typeof vnode.children === 'string') {
 // 如果 children 是字符串，说明它是元素的文本子节点
 el.appendChild(document.createTextNode(vnode.children))
 } else if (Array.isArray(vnode.children)) {
 // 递归地调用 renderer 函数渲染子节点，使用当前元素 el 作为挂载点
 vnode.children.forEach(child => renderer(child, el))
 }

 // 将元素添加到挂载点下
 container.appendChild(el)
  • 如果 vnode.tag 的类 型是函数，则说明它描述的是组件，此时调用 mountComponent 函 数完成渲染。
function mountComponent(vnode, container) {
// 调用组件函数，获取组件要渲染的内容（虚拟 DOM）
 const subtree = vnode.tag()
 // 递归地调用 renderer 渲染 subtree
 renderer(subtree, container)
}

​​我们完全可以使用一个 JavaScript 对象来表达组件​​实现原理和函数差不多

模板的工作原理

​​编译器的作用其实就是将模板编译为渲染函数​​

<div @click="handler">
 click me
</div>

对于编译器来说，模板就是一个普通的字符串，它会分析该字符 串并生成一个功能与之相同的渲染函数：

render() {
return h('div', { onClick: handler }, 'click me')
}
<template>
 <div @click="handler">
click me
 </div>
</template>

<script>
export default {
data() {/* ... */},
 methods: {
 handler: () => {/* ... */}
}
 }
</script>

​​template标签里的内容就是模板内容，编译器会把模板内容编译成渲染函数并添加到 script标签块的组件对象上:​​

export default {
 data() {/* ... */},
methods: {
handler: () => {/* ... */}
 },
 render() {
 return h('div', { onClick: handler }, 'click me')
 }
 }

实现性能提升的要点

<div id="foo" :class="cls"></div>
render() {
// 下面的代码等价于：
 // return h('div', { id: 'foo', class: cls })
return {
tag: 'div',
 props: {
id: 'foo',
 class: cls
}
}
 }
  • ​​cls 是一个变量​​，它可能会发生变 化。
  • 我们知道渲染器的作用之一就是寻找并且只更新变化的内容，所 以当变量 cls 的值发生变化时，渲染器会自行寻找变更点。
  • 对于渲染 器来说，这个“寻找”的过程需要花费一些力气。
  • 如果编译器有能力分析动 态内容，并在编译阶段把这些信息提取出来，然后直接交给渲染器， 这样渲染器不就不需要花费大力气去寻找变更点了。
  • 拿上面的模板来说，我们一 眼就能看出其中 id="foo" 是永远不会变化的，而 ​​:class="cls" 是一个 v-bind 绑定，它是可能发生变化的。​​所以编译器能识别出哪 些是静态属性，哪些是动态属性，在生成代码的时候完全可以附带这 些信息。
render() {
 return {
 tag: 'div',
props: {
id: 'foo',
class: cls
 },
 patchFlags: 1 // 假设数字 1 代表 class 是动态的
 }
}

在生成的虚拟 DOM 对象中多出了一个 patchFlags 属性，我们假设数字 1 代表“ class 是动态的”，这样渲 染器看到这个标志时就知道：“哦，原来只有 class 属性会发生改 变。”​​对于渲染器来说，就相当于省去了寻找变更点的工作量，性能自 然就提升了​​。