Vue

虚拟 dom 树 VNode

虚拟 dom 树实际上是一个对象，当你的数据发生变化的时候，由于在初始阶段 vue 进行了注入进行了数据的监听和绑定，数据改变会通知 vue 然后 vue 会生成一个新的虚拟 dom 树来和原来的虚拟 dom 树进行对比 由于是对象 效率更快。

模板渲染

template 将数据 --》 Vue --》拿到的是字符串 ——》 处理 --》 生成元素 --》挂载到页面

render 方法 生成虚拟 dom

创建虚拟 dom（Vdom） vue 中 有一个 render 方法 而 这个 render 方法的返回值 就是我们 要生成的虚拟 dom 树 初始化的时候会先判断是否存在 render 方法 如果存在 直接运行 render 方法 然后将 render 函数的返回结果直接作为生成的 Vdom 树 如果没有 render 函数的话 会判断 vue 是否有 template 如果存在 template 则会将 template 作为模板然后编译为 render 函数 如果没有 则会将 $el 对应的元素 包含子元素 全部 当做一个模板 然后 进行编译 总之 -- 不管怎样 都会有一个模板 树形结构只支持单根节点

挂载

可以通过 el 配置 将生成的元素挂载到页面 也就是说可以只用 vue 控制部分区域 Vue 实例中 还有一个 $mount 方法 可以用来挂载元素 目前和 el 方式 相同 没有差别

完整流程

• 实例创建 创建 Vue 的实例
• 注入 注入 Vue 及 Vue 的一些方法
• 根据模板编译生成虚拟 dom 树
  • 首次渲染 挂载到元素上

数据发生变化时 --》 数据变动 响应式通知 Vue 重新渲染

• 重新生成虚拟 dom 树
• 比较新旧两个 Vdom 树的差异
• 将差异应用到真实 dom --》完成渲染