概念篇.18961527

声明式 ui

虚拟 DOM

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

const vnode = {
    tag: 'div',
    data: {}
    children: []
}

vnode.tag 的类型是字符串，说明它描述的是普通标签元素，此时调用mountElement 函数完成渲染

渲染器

把虚拟 DOM 对象渲染为真实 DOM 元素

渲染器 renderer 的实现思路，总体来说分为三步

• 创建函数
• 添加事件/属性 ：为元素添加属性和事件：遍历 vnode.props 对象，如果 key 以 on 字符开头，说明它是一个事件，把字符 on 截取掉后再调用 toLowerCase 函数将事件名称小写化，最终得到合法的事件名称，例如 onClick 会变成 click，最后调用addEventListener 绑定事件处理函数。
• 递归处理children

渲染器的精髓都在更新节点的阶段

虚拟 DOM 其实就是用来描述真实 DOM 的普通 JavaScript 对象，渲染器会把这个对象渲染为真实 DOM 元素

组件

组件就是一组 DOM 元素的封装

如果 vnode.tag 的类型是函数，则说明它描述的是组件，此时调用 mountComponent 函数完成渲染

mountComponent

function mountComponent(vnode, container) { 
    const instance = vnode.tag
    render(instance, container)
}

首先调用 vnode.tag 函数，我们知道它其实就是组件函数本身，其返回值是虚拟 DOM，即组件要渲染的内容，这里我们称之为 subtree。既然 subtree 也是虚拟 DOM，那么直接调用 renderer 函数完成渲染即可。

也可以是对象

function mountComponent(vnode, container) { 
    const instance = vnode.tag
    render(instance.render(), container)
}

模板 和编译器

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

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

编译器的作用其实就是将模板编译为渲染函数，
它要渲染的内容最终都是通过渲染函数产生的，然后渲染器再把渲染函数返回的虚拟 DOM渲染为真实 DOM ,这就是模板的工作原理，也是 Vue.js 渲染页面的流程。