Vue的data之数据代理

---

一、data是什么？

data就是Vue中装数据的地方，作为MVVM模式的M存在，它是Vue构造函数的参数对象里面的一个属性，也可以说是一个配置项。

---

二、data在Vue实例对象vm中是什么样的？

写一段代码：

<div id="app"></div>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            name:'zs'
        }
    })
</script>

这里的vm为Vue实例对象，一般在MVVM模型里对应VM。
运行后我们在控制台输入vm会出现vue实例对象vm。

点开它

我们看到很长一串东西，这里面有个_data，它就是Vue中的data。
点开它我们会发现这里面除了name还有一些别的东西，那些是数据劫持。

但是我们发现vm里也有name

这是怎么回事呢？

---

三、data的数据代理

Vue为了我们的代码编写更方便，就把data也就是_data里面的数据通过Object.defineProperty()方法进行了数据代理，复制了一样的data数据在vm下面，同时我们也会发现vm下有两个方法：

这里通过Object.defineProperty()方法中的getter和setter方法进行监听，当name被获取的是否getter方法触发，当name被修改时setter方法触发。

所以我们可以在Vue中通过this.name获取到name，因为它通过数据代理挂载到了vue实例对象vm下面且this指向vm。如果没有数据代理我们就要通过this._data.name获取到name，一旦data里面数据多了起来就很麻烦。

---

另：Object.defineProperty()方法在Vue中很多处用到，它很重要！！！