vue2 通过数据劫持来追踪数据的变化,具体涉及 Object.defineProperty 。
实现场景可以概括如下:
- 创建数据对象,遍历该对象的每一个属性,将每个属性修改为响应式属性,修改了属性的 setter 和 getter 方法
- 对象的每个属性有一个 dep 数组,数组里存的是使用该属性的组件实例
- 当我们在某个组件实例中试图取数据对象的某个属性时,会调用 getter 方法,vue 会判断这个组件实例是否已经存在于该属性的 dep 数组,如果不存在,则添加进去
- 当我们试图修改某个属性时,会调用 setter 方法,vue 会通知所有 dep 数组中的组件实例,各个组件就会去更新视图。
具体的实现可以去读读源码,理解这部分知识大概需要半小时,核心代码位于 src/core/observer/index.js
中