vue-source 手写 vue2.0 源码

rollup 的配置

npm install rollup(打包工具) @babel/core(babel 核心模块) @babel/preset-env(babel 将高级语法转换成低级语法) rollup-plugin-babel （桥梁） rollup-plugin-serve（实现静态服务） cross-env（设置环境变量）

响应式 observe

1. 对象的数据劫持 对象就是使用 defineProperty 实现数据响应式原理（这个方法不能兼容 ie8 及以下，所以 vue 无法兼容)
2. 数组的劫持 vue 对数组是通过重写数组方法 函数劫持来监控数组本身的方法（数组索引进行拦截的话 性能差而且直接更新索引的方式并不多）

模板编译 compiler

1. 解析 html 字符串，将 html 字符串转成 ast 语法树
2. ast 语法树生成最终的 render 函数 （new Function + with）
3. 通过 render 函数生成虚拟 dom
4. 由虚拟 dom 生成真实 dom

生命周期的合并策略 lifecycle

对象的依赖收集

数组的依赖收集

异步更新渲染

同步代码都写完成后去刷新队列触发一次渲染 在模板中取值时，会进行依赖收集，在更改数据时会进行对应的 watcher，调用更新操作。

dom diff

采用同层比较 O(n)， 不需要跨级比较

1. 先判断标签是否一致，若不一致则说明两个不一样的节点，用新的节点替换旧的节点即可；
2. 若标签一致且都是文本，并且文本不一致，则将新的标签文本写入老的标签即可；
3. 若标签一致且都是标签，则需要对比更新属性，有孩子节点需要对比更新孩子节点；
4. 对比孩子节点有五种方案： 1）头部节点相同 2）尾部节点相同 3）新节点的头是老节点的尾 4）老节点的头是新节点的尾 5）乱序：如果老节点中有新节点，则将节点往新前面插，并将原来位置赋值为 null 占位，循环对比完后如果有老节点中没有的新节点，则插入到老节点后面，如果有剩余的老节点则删除。