Vue源码case

Object的变化侦测

1.封装可观测数据

通过Object.defineProperty方法实现了对object数据的可观测，并且封装了Observer类，能够方便的把object数据中所有属性（包括子属性）都转换成getter/setter的形式侦测变化。

2.封装依赖收集

依赖收集：在getter中收集依赖，在setter中通知依赖更新，以及封装了依赖管理器的Dep，用于存储收集到的依赖。

3.封装依赖（Watcher）

为每一个依赖都创建一个Watcher实例，当数据发生变化时，通知Watcher实例，由Watcher实例去做真实的更新操作。

• Data通过observer转换了getter/setter的形式追踪变化。
• 当外界通过Watcher读取数据时，会触发getter从而将Watcher添加到依赖中。
• 当数据发生了变化时，会触发setter，从而向Dep中的依赖（即Watcher）发送通知。
• Watcher接收到通知后，会向外界发送通知，变化通知到外界后可能搞会触发视图更新，也可能触发用户的某个回调函数等。

虚拟DOM

Vue是数据驱动视图的，数据发生变化视图就要随之更新，在更新视图的时候难免要操作DOM，而操作真实的DOM有事非常消耗性能的。用js计算性能来换取操作DOM的性能。

Vue实例生命周期

• 初始化阶段：为Vue实例上初始化一些属性，时间以及响应式数据；
• 模板编译阶段：将模板编译成渲染函数；
• 挂载阶段：将实例挂在到指定的DOM上，即将模板渲染到真实的DOM中；
• 销毁阶段：将实例自身从父组件中删除，并取消依赖追踪及事件监听器；