关于vue.js:手写-Vue2-系列-之-初始渲染

4次阅读

共计 10758 个字符，预计需要花费 27 分钟才能阅读完成。

当学习成为了习惯，常识也就变成了常识。 感激各位的关注、点赞、珍藏和评论。

新视频和文章会第一工夫在微信公众号发送，欢送关注：李永宁 lyn

文章已收录到 github 仓库 liyongning/blog，欢送 Watch 和 Star。

上一篇文章手写 Vue2 系列之编译器中实现了从模版字符串到 render 函数的工作。当咱们失去 render 函数之后，接下来就该进入到真正的挂载阶段了：

挂载 -> 实例化渲染 Watcher -> 执行 updateComponent 办法 -> 执行 render 函数生成 VNode -> 执行 patch 进行首次渲染 -> 递归遍历 VNode 创立各个节点并解决节点上的一般属性和指令 -> 如果节点是自定义组件则创立组件实例 -> 进行组件的初始化、挂载 -> 最终所有 VNode 变成实在的 DOM 节点并替换掉页面上的模版内容 -> 实现初始渲染

所以，本篇文章指标就是实现下面形容的整个过成，实现初始渲染。整个过程中波及如下知识点：

render helper
VNode
patch 初始渲染
指令 (v-model、v-bind、v-on) 的解决
实例化子组件
插槽的解决

接下来就正式进入代码实现过程，一步步实现上述所有内容，实现页面的初始渲染。

/src/compiler/index.js

/**
 * 编译器
 */
export default function mount(vm) {if (!vm.$options.render) { // 没有提供 render 选项，则编译生成 render 函数
    // ...
  }
  mountComponent(vm)
}

/src/compiler/mountComponent.js

/**
 * @param {*} vm Vue 实例
 */
export default function mountComponent(vm) {
  // 更新组件的的函数
  const updateComponent = () => {vm._update(vm._render())
  }

  // 实例化一个渲染 Watcher，当响应式数据更新时，这个更新函数会被执行
  new Watcher(updateComponent)
}

/src/compiler/mountComponent.js

/**
 * 负责执行 vm.$options.render 函数
 */
Vue.prototype._render = function () {
  // 给 render 函数绑定 this 上下文为 Vue 实例
  return this.$options.render.apply(this)
}

/src/compiler/renderHelper.js

/**
 * 在 Vue 实例上装置运行时的渲染帮忙函数，比方 _c、_v，这些函数会生成 Vnode
 * @param {VueContructor} target Vue 实例
 */
export default function renderHelper(target) {
  target._c = createElement
  target._v = createTextNode
}

/src/compiler/renderHelper.js

/**
 * 依据标签信息创立 Vnode
 * @param {string} tag 标签名 
 * @param {Map} attr 标签的属性 Map 对象
 * @param {Array<Render>} children 所有的子节点的渲染函数
 */
function createElement(tag, attr, children) {return VNode(tag, attr, children, this)
}

/src/compiler/renderHelper.js

/**
 * 生成文本节点的 VNode
 * @param {*} textAst 文本节点的 AST 对象
 */
function createTextNode(textAst) {return VNode(null, null, null, this, textAst)
}

/src/compiler/vnode.js

/**
 * VNode
 * @param {*} tag 标签名
 * @param {*} attr 属性 Map 对象
 * @param {*} children 子节点组成的 VNode
 * @param {*} text 文本节点的 ast 对象
 * @param {*} context Vue 实例
 * @returns VNode
 */
export default function VNode(tag, attr, children, context, text = null) {
  return {
    // 标签
    tag,
    // 属性 Map 对象
    attr,
    // 父节点
    parent: null,
    // 子节点组成的 Vnode 数组
    children,
    // 文本节点的 Ast 对象
    text,
    // Vnode 的实在节点
    elm: null,
    // Vue 实例
    context
  }
}

/src/compiler/mountComponent.js

Vue.prototype._update = function (vnode) {
  // 老的 VNode
  const prevVNode = this._vnode
  // 新的 VNode
  this._vnode = vnode
  if (!prevVNode) {
    // 老的 VNode 不存在，则阐明时首次渲染根组件
    this.$el = this.__patch__(this.$el, vnode)
  } else {
    // 后续更新组件或者首次渲染子组件，都会走这里
    this.$el = this.__patch__(prevVNode, vnode)
  }
}

/src/index.js

/**
 * 初始化配置对象
 * @param {*} options 
 */
Vue.prototype._init = function (options) {
  // ...
  initData(this)
  // 装置运行时的渲染工具函数
  renderHelper(this)
  // 在实例上装置 patch 函数
  this.__patch__ = patch
  // 如果存在 el 配置项，则调用 $mount 办法编译模版
  if (this.$options.el) {this.$mount()
  }
}

/src/compiler/patch.js

/**
 * 初始渲染和后续更新的入口
 * @param {VNode} oldVnode 老的 VNode
 * @param {VNode} vnode 新的 VNode
 * @returns VNode 的实在 DOM 节点
 */
export default function patch(oldVnode, vnode) {if (oldVnode && !vnode) {
    // 老节点存在，新节点不存在，则销毁组件
    return
  }

  if (!oldVnode) { // oldVnode 不存在，阐明是子组件首次渲染
    createElm(vnode)
  } else {if (oldVnode.nodeType) { // 实在节点，则示意首次渲染根组件
      // 父节点，即 body
      const parent = oldVnode.parentNode
      // 参考节点，即老的 vnode 的下一个节点 —— script，新节点要插在 script 的后面
      const referNode = oldVnode.nextSibling
      // 创立元素
      createElm(vnode, parent, referNode)
      // 移除老的 vnode
      parent.removeChild(oldVnode)
    } else {console.log('update')
    }
  }
  return vnode.elm
}

/src/compiler/patch.js

/**
 * 创立元素
 * @param {*} vnode VNode
 * @param {*} parent VNode 的父节点，实在节点
 * @returns 
 */
function createElm(vnode, parent, referNode) {
  // 记录节点的父节点
  vnode.parent = parent
  // 创立自定义组件，如果是非组件，则会持续前面的流程
  if (createComponent(vnode)) return

  const {attr, children, text} = vnode
  if (text) { // 文本节点
    // 创立文本节点，并插入到父节点内
    vnode.elm = createTextNode(vnode)
  } else { // 元素节点
    // 创立元素，在 vnode 上记录对应的 dom 节点
    vnode.elm = document.createElement(vnode.tag)
    // 给元素设置属性
    setAttribute(attr, vnode)
    // 递归创立子节点
    for (let i = 0, len = children.length; i < len; i++) {createElm(children[i], vnode.elm)
    }
  }
  // 如果存在 parent，则将创立的节点插入到父节点内
  if (parent) {
    const elm = vnode.elm
    if (referNode) {parent.insertBefore(elm, referNode)
    } else {parent.appendChild(elm)
    }
  }
}

/src/compiler/patch.js

/**
 * 创立文本节点
 * @param {*} textVNode 文本节点的 VNode
 */
function createTextNode(textVNode) {let { text} = textVNode, textNode = null
  if (text.expression) {
    // 存在表达式，这个表达式的值是一个响应式数据
    const value = textVNode.context[text.expression]
    textNode = document.createTextNode(typeof value === 'object' ? JSON.stringify(value) : String(value))
  } else {
    // 纯文本
    textNode = document.createTextNode(text.text)
  }
  return textNode
}

/src/compiler/patch.js

/**
 * 给节点设置属性
 * @param {*} attr 属性 Map 对象
 * @param {*} vnode
 */
function setAttribute(attr, vnode) {
  // 遍历属性，如果是一般属性，间接设置，如果是指令，则非凡解决
  for (let name in attr) {if (name === 'vModel') {
      // v-model 指令
      const {tag, value} = attr.vModel
      setVModel(tag, value, vnode)
    } else if (name === 'vBind') {
      // v-bind 指令
      setVBind(vnode)
    } else if (name === 'vOn') {
      // v-on 指令
      setVOn(vnode)
    } else {
      // 一般属性
      vnode.elm.setAttribute(name, attr[name])
    }
  }
}

setVModel

/src/compiler/patch.js

/**
 * v-model 的原理
 * @param {*} tag 节点的标签名
 * @param {*} value 属性值
 * @param {*} node 节点
 */
function setVModel(tag, value, vnode) {const { context: vm, elm} = vnode
  if (tag === 'select') {
    // 下拉框，<select></select>
    Promise.resolve().then(() => {
      // 利用 promise 提早设置，间接设置不行，// 因为这会儿 option 元素还没创立
      elm.value = vm[value]
    })
    elm.addEventListener('change', function () {vm[value] = elm.value
    })
  } else if (tag === 'input' && vnode.elm.type === 'text') {
    // 文本框，<input type="text" />
    elm.value = vm[value]
    elm.addEventListener('input', function () {vm[value] = elm.value
    })
  } else if (tag === 'input' && vnode.elm.type === 'checkbox') {
    // 抉择框，<input type="checkbox" />
    elm.checked = vm[value]
    elm.addEventListener('change', function () {vm[value] = elm.checked
    })
  }
}

setVBind

/src/compiler/patch.js

/**
 * v-bind 原理
 * @param {*} vnode
 */
function setVBind(vnode) {const { attr: { vBind}, elm, context: vm } = vnode
  for (let attrName in vBind) {elm.setAttribute(attrName, vm[vBind[attrName]])
    elm.removeAttribute(`v-bind:${attrName}`)
  }
}

setVOn

/src/compiler/patch.js

/**
 * v-on 原理
 * @param {*} vnode 
 */
function setVOn(vnode) {const { attr: { vOn}, elm, context: vm } = vnode
  for (let eventName in vOn) {elm.addEventListener(eventName, function (...args) {vm.$options.methods[vOn[eventName]].apply(vm, args)
    })
  }
}

/src/compiler/patch.js

/**
 * 创立自定义组件
 * @param {*} vnode
 */
function createComponent(vnode) {if (vnode.tag && !isReserveTag(vnode.tag)) { // 非保留节点，则阐明是组件
    // 获取组件配置信息
    const {tag, context: { $options: { components} } } = vnode
    const compOptions = components[tag]
    const compIns = new Vue(compOptions)
    // 将父组件的 VNode 放到子组件的实例上
    compIns._parentVnode = vnode
    // 挂载子组件
    compIns.$mount()
    // 记录子组件 vnode 的父节点信息
    compIns._vnode.parent = vnode.parent
    // 将子组件增加到父节点内
    vnode.parent.appendChild(compIns._vnode.elm)
    return true
  }
}

/src/utils.js

/**
 * 是否为平台保留节点
 */
export function isReserveTag(tagName) {const reserveTag = ['div', 'h3', 'span', 'input', 'select', 'option', 'p', 'button', 'template']
  return reserveTag.includes(tagName)
}

以下示例是插槽的罕用形式。插槽的原理其实很简略，只是实现起来略微有些麻烦罢了。

解析

如果组件标签有子节点，在解析的时候将这些子节点，解析成一个特定的数据结构，该构造中蕴含了插槽的全副信息，而后将该数据结构放到父节点的属性上，其实就是找个中央寄存这些信息，而后在 renderSlot 中应用时取出来。当然这个解析过程是产生在父组件的解析过程中的。
生成渲染函数

在生成子组件的渲染函数阶段，如果碰到 slot 标签，则返回一个 _t 的渲染函数，函数接管两个参数：属性的 JSON 字符串模式，slot 标签的所有子节点的渲染函数组成的 children 数组。
render helper

在执行子组件的渲染函数时，如果执行到 vm._t，就会调用 renderSlot 办法，该办法会返回插槽的 VNode，而后进入子组件的 patch 阶段，将这些 VNode 变成实在的 DOM 并渲染到页面上。

以上就是插槽的原理，而后接下来实现的时候，在某些中央可能会略微有点绕，多多少少是因为整体架构存在一些问题，所以外面会有一些修补性质的代码，这些代码你能够了解为为了实现插槽性能，而写的一点业务代码。你只须要把住插槽的实质即可。

<!-- comp -->
<template>
  <div>
    <div>
      <slot name="slot1">
        <span> 插槽默认内容 </span>
      </slot>
    </div>
      <slot name="slot2" v-bind:test="xx">
        <span> 插槽默认内容 </span>
      </slot>
    <div>
    </div>
  </div>
</template>

<comp></comp>

<comp>
  <template v-slot:slot2="xx">
    <div> 作用域插槽，通过插槽从父组件给子组件传递内容 </div>
  </template>
<comp>

/src/compiler/parse.js

function processElement() {
    // ...

    // 解决插槽内容
    processSlotContent(curEle)

    // 节点解决完当前让其和父节点产生关系
    if (stackLen) {stack[stackLen - 1].children.push(curEle)
      curEle.parent = stack[stackLen - 1]
      // 如果节点存在 slotName，则阐明该节点是组件传递给插槽的内容
      // 将插槽信息放到组件节点的 rawAttr.scopedSlots 对象上
      // 而这些信息在生成组件插槽的 VNode 时（renderSlot）会用到
      if (curEle.slotName) {const { parent, slotName, scopeSlot, children} = curEle
        // 这里对于 children 的操作，只是单纯为了避开 JSON.stringify 的循环援用问题
        // 因为生成渲染函数时须要对 attr 执行 JSON.stringify 办法
        const slotInfo = {
          slotName, scopeSlot, children: children.map(item => {
            delete item.parent
            return item
          })
        }
        if (parent.rawAttr.scopedSlots) {parent.rawAttr.scopedSlots[curEle.slotName] = slotInfo
        } else {parent.rawAttr.scopedSlots = { [curEle.slotName]: slotInfo }
        }
      }
    }
  }

/src/compiler/parse.js

/**
 * 解决插槽
 * <scope-slot>
 *   <template v-slot:default="scopeSlot">
 *     <div>{{scopeSlot}}</div>
 *   </template>
 * </scope-slot>
 * @param {AST} el 节点的 AST 对象
 */
function processSlotContent(el) {
  // 留神，具备 v-slot:xx 属性的 template 只能是组件的根元素，这里不做判断
  if (el.tag === 'template') { // 获取插槽信息
    // 属性 map 对象
    const attrMap = el.rawAttr
    // 遍历属性 map 对象，找出其中的 v-slot 指令信息
    for (let key in attrMap) {if (key.match(/v-slot:(.*)/)) { // 阐明 template 标签上 v-slot 指令
        // 获取指令后的插槽名称和值，比方: v-slot:default=xx
        // default
        const slotName = el.slotName = RegExp.$1
        // xx
        el.scopeSlot = attrMap[`v-slot:${slotName}`]
        // 间接 return，因为该标签上只可能有一个 v-slot 指令
        return
      }
    }
  }
}

/src/compiler/generate.js

/**
 * 解析 ast 生成 渲染函数
 * @param {*} ast 语法树 
 * @returns {string} 渲染函数的字符串模式
 */
function genElement(ast) {
  // ...

  // 解决子节点，失去一个所有子节点渲染函数组成的数组
  const children = genChildren(ast)

  if (tag === 'slot') {
    // 生成插槽的处理函数
    return `_t(${JSON.stringify(attrs)}, [${children}])`
  }

  // 生成 VNode 的可执行办法
  return `_c('${tag}', ${JSON.stringify(attrs)}, [${children}])`
}

renderHelper

/src/compiler/renderHelper.js

/**
 * 在 Vue 实例上装置运行时的渲染帮忙函数，比方 _c、_v，这些函数会生成 Vnode
 * @param {VueContructor} target Vue 实例
 */
export default function renderHelper(target) {
  // ...
  target._t = renderSlot
}

renderSlot

/src/compiler/renderHelper.js

/**
 * 插槽的原理其实很简略，难点在于实现
 * 其原理就是生成 VNode，难点在于生成 VNode 之前的各种解析，也就是数据筹备阶段
 * 生成插槽的的 VNode
 * @param {*} attrs 插槽的属性
 * @param {*} children 插槽所有子节点的 ast 组成的数组
 */
function renderSlot(attrs, children) {
  // 父组件 VNode 的 attr 信息
  const parentAttr = this._parentVnode.attr
  let vnode = null
  if (parentAttr.scopedSlots) { // 阐明给以后组件的插槽传递了内容
    // 获取插槽信息
    const slotName = attrs.name
    const slotInfo = parentAttr.scopedSlots[slotName]
    // 这里的逻辑略微有点绕，倡议关上调试，查看一下数据结构，理清对应的思路
    // 这里比拟绕的逻辑齐全是为了实现插槽这个性能，和插槽自身的原理没关系
    this[slotInfo.scopeSlot] = this[Object.keys(attrs.vBind)[0]]
    vnode = genVNode(slotInfo.children, this)
  } else { // 插槽默认内容
    // 将 children 变成 vnode 数组
    vnode = genVNode(children, this)
  }

  // 如果 children 长度为 1，则阐明插槽只有一个子节点
  if (children.length === 1) return vnode[0]
  return createElement.call(this, 'div', {}, vnode)
}

genVNode

/src/compiler/renderHelper.js

/**
 * 将一批 ast 节点 (数组) 转换成 vnode 数组
 * @param {Array<Ast>} childs 节点数组
 * @param {*} vm 组件实例
 * @returns vnode 数组
 */
function genVNode(childs, vm) {const vnode = []
  for (let i = 0, len = childs.length; i < len; i++) {const { tag, attr, children, text} = childs[i]
    if (text) { // 文本节点
      if (typeof text === 'string') { // text 为字符串
        // 结构文本节点的 AST 对象
        const textAst = {
          type: 3,
          text,
        }
        if (text.match(/{{(.*)}}/)) {
          // 阐明是表达式
          textAst.expression = RegExp.$1.trim()}
        vnode.push(createTextNode.call(vm, textAst))
      } else { // text 为文本节点的 ast 对象
        vnode.push(createTextNode.call(vm, text))
      }
    } else { // 元素节点
      vnode.push(createElement.call(vm, tag, attr, genVNode(children, vm)))
    }
  }
  return vnode
}

好了，到这里，模版的初始渲染就曾经实现了，如果你能看到如下效果图，则阐明一切正常。因为整个过程波及的内容还是比拟多的，如果感觉某些中央不太分明，倡议再看看，认真梳理下整个流程。

动图链接：https://gitee.com/liyongning/…

能够看到，原始标签、自定义组件、插槽都曾经残缺的渲染到了页面上，实现了初始渲染之后，接下来就该去实现后续的更新过程了，也就是下一篇 手写 Vue2 系列之 patch —— diff。

配套视频，微信公众号回复：” 精通 Vue 技术栈源码原理视频版 ” 获取
精通 Vue 技术栈源码原理专栏
github 仓库 liyongning/Vue 欢送 Star
github 仓库 liyongning/Lyn-Vue-DOM 欢送 Star
github 仓库 liyongning/Lyn-Vue-Template 欢送 Star

感激各位的：关注、点赞、珍藏和评论，咱们下期见。

当学习成为了习惯，常识也就变成了常识。 感激各位的关注、点赞、珍藏和评论。

新视频和文章会第一工夫在微信公众号发送，欢送关注：李永宁 lyn

文章已收录到 github 仓库 liyongning/blog，欢送 Watch 和 Star。

正文完

vue.js

发表至： vue.js

2022-03-17

0

关于vue.js:WEBVUE

关于vue.js:vue-按钮-权限控制

关于vue.js:PHP开发者福音支持CRUD代码生成且前后分离的tp6Vue3后台管理系统开源啦

关于vue.js:Vue-3-到底有什么不同全局-API

关于设计模式:设计模式之工厂模式深入解析简单工厂模式工厂方法模式和抽象工厂模式

关于vue.js:手写-Vue2-系列-之-初始渲染

前言

指标

实现

mount

mountComponent

vm._render

render helper

createElement

createTextNode

VNode

vm._update

装置 \_\_patch\_\_、render helper

patch

createElm

createTextNode

setAttribute

setVModel

setVBind

setVOn

createComponent

isReserveTag

插槽原理

示例

parse

processSlotContent

generate

renderHelper

renderSlot

genVNode

后果

链接

站内搜索