- let App = new vue({
- data: {
- text: "text",
- text2: "text2"
- }
- })
第一步:
使用 observe 函数对 Vue 中的 data 对象进行处理, 使其可观察 (observable). 这一步的实质就是使用 Object.defineProperty 方法重写 data 的属性, 重写属性特征 (主要指 set 和 get 两个属性特征函数, 从而在获取属性值和设置属性值的时候插入额外的操作来实现视图中跟随数据变化):
了解 Vue 实例化过程做了什么? 下面可以看出, Vue 实例化的时候, 会把传入对象的 data 属性传递给实例的_data 属性, 同时, 调用 observe 函数来处理_data 也就是 option.data.observe 函数实质上就是使_data 对象的所有属性的 set, get.
- class Vue {
- constructor(options) {
- this._data = options.data;
- observe(this._data);
- }
- }
observe 函数具体的实现, 其实就是遍历_data 中的所有属性, 调用 defineProperty 在 set 和 get 来注入取值和设置值时的额外操作.
其中, dep 是一个数组, 其中存放着依赖于当前属性的观察者列表, 也就是属性改变时要通知列表中的这些对象来更新数据.
- function observe(obj) {
- Object.keys(obj).forEach((key) => {
- defineReactive(obj, key, obj[key]);
- })
- }
- // defineReactive 函数
- function defineReactive(obj, key, value) {
- const dep = [];
- Object.defineProperty(obj, key, {
- enumerable: true,
- configurable: true,
- get: () => {
- // 读取值时的额外操作, 即绑定当前的观察者到依赖列表中
- dep.push(Dep.target);
- return value;
- },
- set: (newVal) => {
- if (newVal === value) { return };
- // 设置值时的额外操作, 即设置值时通知依赖列表中的所有观察者来更新数据
- dep.forEach((a) => a.update);
- value = newVal;
- }
- })
- }
来源: http://www.bubuko.com/infodetail-2789307.html