Vue数据代理

一、MVVM模型

M：model（模型）- 对应data中的数据
V：view（视图）- 对应页面中的模板
VM：viewModel（视图模型）- 对应vue实例

<!-- M：model（模型）- 对应data中的数据-->
<div id="root">
    <h1>插值语法</h1>
    <h2>hello,{{name}}</h2>
</div>
<script type="text/javascript">
    //VM：viewModel（视图模型）- 对应vue实例
    new Vue({
        el:'#root',
        //M：model（模型）- 对应data中的数据
        data:{
            name:'vue',
        }
    })
</script>

二、数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作

<script type="text/javascript">
    obj1 = {x:100}
    obj2 = {y:200}
    //数据代理：使用obj2代理obj1的x属性，
    Object.defineProperty(obj2,'x',{
        //get返回值是obj2中x的值
        get(){
            return obj1.x;
        },
        //set获取obj2中x的值
        set(v) {
            obj1.x = v;
        }
    })
</script>

三、vue中的数据代理

1.vue先对data中的数据进行数据劫持，放在_data中
2.再对data进行数据代理，放在vm中，为数据添加getter和setter
3.通过vm代理data中的属性，vm通过getter方法获取data中的数据，vm发生变化，通过setter动态改变data中数据