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属性。