vue 数据代理和数据监测
数据代理和数据监测是vue 里面一个很重要的概念,但是他们在vue中扮演什么角色,了解这些前得先了解 数据代理和数据监测的概念。
vue中双向绑定 v-model和v-bind 指令都能将模型数据反应到页面,而且每当模型页面数据改变时都能反馈到页面,v-model页面上的数据改变也能反映到模型 这里面就包含着 数据代理和数据监测 的使用。
1.数据代理:
通过一个对象去对另一个对象属进行操作
实现原理是通过 ES6语法中Object对象的defineProperties方法实现的。
Object.defineProperty(obj, prop, desc)
obj 需要定义属性的当前对象
prop 当前需要定义的属性名
desc 属性描述符
因为主要是讲数据代理和数据监测 所以主要讲下desc 里面的getter和setter配置项,其他的用法就省略了。
let obj={};
let objName='lisi';
Object.defineProperty(obj,'name',{
get(){
console.log('get');
return objName;
},
set(val){
console.log('set');
objName=val;
}
});
console.log(obj.name);
obj.name='111';
console.log(obj.name);
运行结果:
get
lisi
set
get
111
上面的案例实现了,当访问obj的name属性就触发get方法返回objName的值,给obj的name属性复制就触发set方法将值赋给objName,这样就实现了通过obj的name属性去操作objName对象,这就是数据代理,而当数据发生改变被set操作监测到更新值并重新渲染页面时这就是 数据监测。
<script>
const vm=new Vue({
el:'#root',
data() {
return {
name:'张三',
id:1
}
},
})
</script>>
定义一个简单的vue对象去看vue中data属性里面的值
可以看到 vue为data属性里面的name和id都生成了get,set方法。
通过生成的 name,id属性去代理data中的name,id属性。