Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象。但是当数据进行改变时视图也会跟着变化,他的实现原理就是通过响应式系统。
Object.defineProperty(通过该函数实现响应式系统)
通过object.defineProperty可以让对象变为可观察的。
通过以下该方法的处理,
obj的key 在读取的时候就会触发testGetter()方法
obj的key 在写入的时候就会触发testSetter()方法,在触发更新视图的方法。
第一个参数obj: 目标对象
第二个参数prop: 目标对象的属性名 如 key
第三个参数descriptor:描述符{}中包含一些属性
function test (obj, key, val) {
Object.defineProperty(obj, key, {
enumerable: true, /* 属性可枚举 */
configurable: true, /* 属性可被修改或删除 */
get: function testGetter () {
return val; 获取属性的方法(依赖收集)
},
set: function testSetter (newVal) {
if (newVal === val) return;
设置属性的方法
//渲染页面方法 testRender()
}
});
}
仅有defineProperty是不够的,因为上述方法我们只能对某个对象中其中一个属性值进行 响应式处理。如果想要处理一个对象所有的属性可以使用 observer,通过遍历对象属性的方法对 对象进行响应式处理。
function observer (value) {
if (!value || (typeof value !== 'object')) {
return;
}
Object.keys(value).forEach((key) => {
test(value, key, value[key]);上一个响应式方法test
});
}
在vue的源码中我们通过observer监听data对象的变化 就可以做到数据变化 视图的时时更新。
class Vue {
/* Vue构造类 */
constructor(options) {
this._data = options.data;
observer(this._data);
}
}