【Vue】数据代理

看一下简单的例子：

<script type="text/javascript">
    let obj={x:100}
    let obj2={y:200}

    Object.defineProperty(obj2,'x',{
        get(){
            console.log('我是obj中的x,我的值是:',obj.x)
            return obj.x
        },
        set(value){
            obj.x=value
            console.log("set被调用了,新的的值是:"+value)
        }
    })
</script>

分别输出obj和obj2，可以看到obj2中多了一个x，需要点击才能显示x的值，

点击（…）后，可以发现其实是调用了get（）方法，也就是说，在每次读取数据的时候，都会调用get（）方法。

通过控制台修改obj2中x的值，此时修改这个操作调用了set方法，如下图：

可以发现，可以通过Object.defineProperty来实现修改obj2中x的值来修改obj中x的值。这就是数据代理。

Vue中的数据代理就比较简单了，代码如下：

<div id="root">
    <h1>学校名称：{{name}}</h1>
    <h1>学校地址：{{adress}}</h1>
</div>

<script type="text/javascript">

    Vue.config.productionTip=false
    const vm=new Vue({
        el:'#root',
        data:{
            name:'大学',
            adress: '杭州'
        }
    })
</script>

打开控制台，修改学校的名字。
输出vm中data配置项中的内容，可以发现和上文中提到的数据代理方式底层逻辑是一样的。