深入理解和手写--vue的数据代理原理
2021-01-20 本文已影响0人
Raral
概述
在vue中对数据的读操作和写操作都是通过代理到vm中实现的
- 数据代理: 通过一个对象代理对另一个对象中的属性的操作(读/写)
- vue数据代理: 通过vm 对象来代理data对象中所有属性的操作
- 优点: 更方便的操作data数据
const vm = new MVVM({
el: "#test",
data: {
name: "feifei"
}
})
console.log(vm.name, vm); //feifei vm代理data数据的读操作
vm.name = "xiaoxiao"; //vm代理data数据的写操作
console.log(vm._data.name, vm.name);
/**
* 一般开发者只需要调用 vm.name 进行访问和读写
*/
基本实现流程
代码实现数据代理 vm.text == vm._data.text
(function() {
function Vue(options) {
// 配置对象保存到vm
this.$options = options || {};
var data = this._data = this.$options.data;
var me = this;
//数据代理 vm.xxx => vm._data.xxx 不需要递归
this.convertData(data);
}
Vue.prototype = {
convertData: function(data) {
var me = this;
Object.keys(data).forEach(key => {
me._proxyData(key);
})
},
_proxyData: function(key) {
var me = this;
Object.defineProperty(me, key, {
configurable: false,
enumerable: true,
// writable: true,
get: function proxyGetter() {
return me._data[key];
},
set: function proxySetter(newVal) {
me._data[key] = newVal;
}
})
}
}
return window.Vue = Vue;
})()