vue（五）：Vue 响应式原理
理解原理之前，可以先查看 Object.defineProperty 相关知识点。
1 Object.defineProperty
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
1.1 语法
Object.defineProperty(obj, prop, descriptor)
参数
- obj
要在其上定义属性的对象。 - prop
要定义或修改的属性的名称。 - descriptor
将被定义或修改的属性描述符。
1.2 示例
添加多个属性和默认值
考虑特性被赋予的默认特性值非常重要，通常，使用点运算符和 Object.defineProperty() 为对象的属性赋值时，数据描述符中的属性默认值是不同的，如下例所示。
var o = {};
o.a = 1;
// 等同于 :
Object.defineProperty(o, "a", {
value : 1,
writable : true,
configurable : true,
enumerable : true
});
// 另一方面，
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
value : 1,
writable : false,
configurable : false,
enumerable : false
});
一般的 Setters 和 Getters
下面的例子展示了如何实现一个自存档对象。 当设置temperature 属性时，archive 数组会获取日志条目。
function Archiver() {
var temperature = null;
var archive = [];
Object.defineProperty(this, 'temperature', {
get: function() {
console.log('get!');
return temperature;
},
set: function(value) {
temperature = value;
archive.push({ val: temperature });
}
});
this.getArchive = function() { return archive; };
}
var arc = new Archiver();
arc.temperature; // 输出 'get!'，获取值的时候，调用 get 方法
arc.temperature = 11; // 设置值的时候，调用 set 方法
arc.temperature = 13; // 设置值的时候，调用 set 方法
arc.getArchive(); // [{ val: 11 }, { val: 13 }]
或
var pattern = {
get: function () {
return 'I alway return this string,whatever you have assigned';
},
set: function () {
this.myname = 'this is my name string';
}
};
function TestDefineSetAndGet() {
Object.defineProperty(this, 'myproperty', pattern);
}
var instance = new TestDefineSetAndGet();
instance.myproperty = 'test';
// 'I alway return this string,whatever you have assigned'
console.log(instance.myproperty);
// 'this is my name string'
console.log(instance.myname); // 继承属性
2 深入响应式原理
如何追踪变化
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
检测变化的注意事项
由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的
对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如，对于：
Vue.set(vm.someObject, 'b', 2)
您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
this.$set(this.someObject,'b',2)
有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新属性不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
声明响应式属性
由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明所有根级响应式属性，哪怕只是一个空值：
var vm = new Vue({
data: {
// 声明 message 为一个空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'
异步更新队列
可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。
例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。
3 实例分析
自己实现一个响应式实例，完整代码为：
const Observer = function(data) {
for (let key in data) {
defineReactive(data, key);
}
};
const defineReactive = function(obj, key) {
const dep = new Dep();
let val = obj[key];
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
console.log('in get');
dep.depend();
return val;
},
set(newVal) {
if (newVal === val) {
return;
}
val = newVal;
dep.notify();
}
});
};
const observe = function(data) {
return new Observer(data);
};
const Vue = function(options) {
const self = this;
if (options && typeof options.data === 'function') {
this._data = options.data.apply(this);
}
this.mount = function() {
return new Watcher(self, self.render);
};
this.render = function() {
// 在 Vue 的 render 函数中，我们调用了本次渲染相关的值，self._data.text
// 所以，与渲染无关的值，并不会触发 get，
// 也就不会在依赖收集器中添加到监听(addSub 方法不会触发)，
// 即使调用 set 赋值，notify 中的 subs 也是空的。
// 例如：下文的 vue._data.text2 = '123'; 因为 render 函数中没有获取该属性，
// 也就是没有触发 get 方法，则没有对该属性进行监听
// self._data.text2; 只要有调用就会进行监听，并不需要返回
return {
text: self._data.text // 触发 get 方法，则会在依赖收集器 Dep 中添加到监听
// text3: 'ssds' // 不会触发 get 方法
};
};
observe(this._data);
};
const Watcher = function(vm, fn) {
const self = this;
this.vm = vm;
Dep.target = this; // 将收集器的目标指向了当前 Watcher
this.addDep = function(dep) {
dep.addSub(self);
};
this.update = function() {
console.log('in watcher update');
fn();
};
this.value = fn();
Dep.target = null;
};
const Dep = function() {
const self = this;
this.target = null;
this.subs = [];
this.depend = function() {
if (Dep.target) {
console.log('Dep.target');
console.log(Dep.target);
Dep.target.addDep(self);
}
};
this.addSub = function(watcher) {
self.subs.push(watcher);
};
this.notify = function() {
for (let i = 0; i < self.subs.length; i += 1) {
self.subs[i].update();
}
};
};
const vue = new Vue({
data() {
return {
text2: 'hello worlds',
text: 'hello world'
};
}
});
vue.mount(); // in get
vue._data.text = '123'; // in watcher update /n in get
vue._data.text2 = '123';
说明：主要对象有 Vue、Observer、Watcher、Dep；
-
Vue 主要 mount、render 方法，mount 调用 Watcher ，render 触发 Object.defineProperty 中 get 方法；
-
Observer 对 data 中的属性，使用 Object.defineProperty 定义 set 和 get；
-
Watcher 主要 addDep、update 方法，第一次触发 fn()，调用 render 方法，然后触发 get 方法；
-
Dep 主要 depend、addSub、notify 方法，depend 添加依赖，notify 被 set 调用，触发 Watcher update 方法。
实例思路导图：
vue 响应式原理--实例思路导图
