Vue.js响应式原理详解

来源：动视网责编：小采时间：2020-11-27 20:03:33

Vue.js响应式原理详解

Vue.js响应式原理详解:本人是Java背景，许多年前刚接触JavaScript时有点怪怪的，因为它没有 getters 和 setters。随着时间的推移，我开始喜欢上这个缺失的特性，因为相比Java大量的 getter 和 setter，它让代码更简洁。例如，我们看看下面的Java代码：class Person

推荐度：

点击下载本文 文档为doc格式

导读Vue.js响应式原理详解:本人是Java背景，许多年前刚接触JavaScript时有点怪怪的，因为它没有 getters 和 setters。随着时间的推移，我开始喜欢上这个缺失的特性，因为相比Java大量的 getter 和 setter，它让代码更简洁。例如，我们看看下面的Java代码：class Person

显然，她也是参考的官方文档，之前我也读过，所以我开始阅读Vue源码，以便更好的理解发生了什么。过了一会我想起在官方文档看到一个叫 Object.defineProperty() 的方法，我找到它，如下：

/**
* 给对象定义响应的属性
*/export function defineReactive (
 obj: Object,
 key: string,
 val: any,
 customSetter?: ?Function,
 shallow?: boolean
) { const dep = new Dep() const property = Object.getOwnPropertyDescriptor(obj, key) if (property && property.configurable === false) { return
 } // 预定义getter/setters const getter = property && property.get const setter = property && property.set let childOb = !shallow && observe(val)
 Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) {
 dep.depend() if (childOb) {
 childOb.dep.depend()
 } if (Array.isArray(value)) {
 dependArray(value)
 }
 } return value
 }, set: function reactiveSetter (newVal) { const value = getter ? getter.call(obj) : val /* 禁用eslint 不进行自我比较 */ if (newVal === value || (newVal !== newVal && value !== value)) { return
 } /* 开启eslint 不进行自己比较 */ if (process.env.NODE_ENV !== 'production' && customSetter) {
 customSetter()
 } if (setter) {
 setter.call(obj, newVal)
 } else {
 val = newVal
 }
 childOb = !shallow && observe(newVal)
 dep.notify()
 }
 })
}

所以答案一直存在于文档中：

把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是仅 ES5 支持，且无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。

我只想简单的了解 Object.defineProperty() 做了什么，所以我用一个例子简单的给你讲解一下：

var person2 = {
 firstName: 'George',
 lastName: 'Clooney',
};
Object.defineProperty(person2, 'fullName', {
 get: function () { return `${this.firstName} ${this.lastName}`;
 },
});
console.log(person2.fullName); // 打印 "George Clooney"

还记得文章开头C#的隐式 getter 吗？它们看起来很类似，但ES5才开始支持。你需要做的是使用 Object.defineProperty() 定义现有对象，以及何时获取这个属性，这个getter被称为响应式——这实际上就是Vue在你添加新数据时背后所做的事。