8 - 数据驱动总结

[chenfaxiang]

总结数据驱动

数据驱动是 Vue.js 的核心思想，通过对数据的修改直接映射到对应的 DOM 上，不需要像以前还要关注 DOM 层面的操作；

1. 从 new vue 构建实例时调用构造函数 Vue ，在函数内执行各种初始化的钩子函数等，通过 vm.$mount 方法挂载 vm，将模板渲染成实际的 DOM；
2. 在 vm.$mount 实现挂载的过程中通过对不同平台(web、weex)的代码按不同执行文件进行了区分，在方法中通过 vm._render 方法先生成虚拟 Node，通过实例化的渲染 Watcher最终调用 vm._update 更新 DOM；
3. vm._render 最终是执行 createElement 方法并返回一个虚拟 vnode，通过 Virtual DOM 映射到真实的 DOM，而在映射的过程中需要学习 createElement 创建 VNode 的过程，它创建每个 VNode 都有 children，children 每个元素也是一个 VNode，这样就形成了一个 VNode Tree；最后通过 vm._update 完成虚拟 node 到真实 DOM 的渲染；
4. vm._update 方法更新数据是在首次渲染和数据需要更新时调用，而它的核心是在不同平台下的 vm.__patch__，通过参数 nodeOps 封装的一系列 DOM 操作方法 和 modules 定义的一系列模块的钩子函数在底层方法中通过虚拟Node创建真实的 DOM，最后通过调用原生的 DOM API (appendChild、insertBefore) 进行 DOM 操作动态创建 Vue 的 DOM 并插入到 Body 上。

总结了一个大概，也许过于潦草，但还是希望记录能给自己带来流程的理解。