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中;
- 销毁阶段:将实例自身从父组件中删除,并取消依赖追踪及事件监听器;