Vue.js设计与实现学习总结(第三章) 组件渲染原理虚拟DOM

渲染器

虚拟DOM: 使用Javascript对象描述真实的 DOM 结构. 例如:

  const vNode = {
    // 标签名
    tag: 'div',
    // 标签属性
    prop: {
      onClick () {
        alert('点击')
      }
    },
    // 子节点
    children: [
      {
        tag: 'span',
        children: 'hello world'
      }
    ]
  }

使用渲染器将虚拟 DOM 变成真实 DOM 并渲染到浏览器页面中, 并寻找并且只更新变化的内容, 如图1:

因此需要编写一个渲染器, 将上面的虚拟 DOM 渲染为真实 DOM:

  function Render(vNode, root) {
    // 使用 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).toLocaleLowerCase(), vNode.props[key])
      }
    }

    // 处理 children
    if (typeof vNode.children == 'string') {
      // 为字符串说明它是元素的文本子节点
      let text = document.createTextNode(vNode.children)
      el.appendChild(text)
    } else if (Array.isArray(vNode.children)) {
      // 递归调用 Render 函数渲染子节点, 使用当前元素 el 作为挂载点
      for (let item of vNode.children) {
        Render(item, el)
      }
    }
    // 元素添加到挂载点下
    root.appendChild(el)
  }

渲染器 Render 实现思路, 总体为三步:

1. 创建元素: 把 vNode.tag 作为标签名创建 DOM 元素
2. 为元素添加属性和事件: 遍历 vNode.props 对象, 如果 key 以 on 字符开头, 说明它是一个事件, 把字符 on 截取后再调用 addEventListener 绑定事件处理函数
3. 处理 children: 如果 children 是一个数组, 就用递归调动 Render 继续渲染, 注意此时要把刚刚创建的元素作为挂载点(父节点); 如果 children 是字符串, 则使用 createTextNode 函数创建一个文本节点, 并将其添加到新创建的元素内

组件

组件本质就是一组 DOM 元素的封装, 可以定义一个函数代表组件(也可以使用对象, 该对象添加一个函数返回值为虚拟 DOM 即可), 函数的返回值是组件要渲染的内容

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

因此就可以使用虚拟 DOM 描述组件:

const vNode = {
    tag: MyComponent
}

因此在渲染器渲染时就需要判断 tag 的类型:

  function Render (vNode, container) {
    if (typeof vNode.tag === 'string') {
    // 说明 vNode 描述的是标签元素
      mountElement(vNode, container)
    } else if (typeof vNode.tag === 'function') {
      // 说明 vNode 描述的是组件
      mountComponent(vNode, container)
    }
  }

若为字符串就可以使用 mountElement 函数进行渲染, 内容与上文的 Render 函数一样

  function mountElement(vNode, root) {
    // 使用 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).toLocaleLowerCase(), vNode.props[key])
      }
    }

    // 处理 children
    if (typeof vNode.children == 'string') {
      // 为字符串说明它是元素的文本子节点
      let text = document.createTextNode(vNode.children)
      el.appendChild(text)
    } else if (Array.isArray(vNode.children)) {
      // 递归调用 Render 函数渲染子节点, 使用当前元素 el 作为挂载点
      for (let item of vNode.children) {
        // 进行递归时, 依然需要判断 tag 的类型, 因此是调用 Render
        Render(item, el)
      }
    }
    // 元素添加到挂载点下
    root.appendChild(el)
  }

若为函数则使用 mountComponent 函数渲染:

  function mountComponent (vNode, container) {
  // 调用组件函数, 获取组件要渲染的内容(虚拟DOM)
  const subtree = vNode.tag()
  // 递归调用 Render 渲染 subtrss
  Render(subtree, container)
}