vue实现数据代理的原理

const vueInstance = new Vue({
		el:'#app',
		data:{
			a:'名字',
			b:'b',
			c:'c'
		}    
})
复制代码

vueInstance._data.a => vueInstance.a ?怎么实现

实现一个MVVM的数据代理

const vm=new MVVM({
		el:'#app',
		data:{
			a:'名字',
			b:'b',
			c:'c'
		}
	});
	
function MVVM(options){
		this.$options=options
		//获取参数内的data属性值，
		var data=this._data=this.$options.data

		var me=this

		//得到data所有属性，遍历
		Object.keys(data).forEach((key)=>{
			me._proxy(key)
		})
	}
	MVVM.prototype = {
		_proxy:function(key){
			var me=this
			Object.defineProperty(me,key,{
				configurable:false,//不可以重新定义
				enumerable:true,//可以枚举
				get(){
					//获取this._data属性时，将参数的data属性值返回
					return me._data[key]
				},
				set(newVal){
					//给this._data内属性赋予新值
					me._data[key]=newVal
				}
			})	
		}
	}	
	
复制代码

转载于:https://juejin.im/post/5c37fb966fb9a049e2323824