Vue API 详解（1）—— data

1. 官方文档：https://cn.vuejs.org/v2/api/#data

2. 首先这里涉及到一个面试题：组件中的 data 为什么必须是函数形式，而不能是对象形式？

　　原因在于，组件可能会被多次实例化使用，如果组件中的 data 仍然是对象形式，则所有的实例化组件共享引用同一个 data 对象，其中一个组件实例改变 data 中的数据，会导致其他实例中 data 数据同时修改。因此需要将其设置为一个函数返回对象，这样每次实例化一个组件，每个组件拿到的是全新的一个属于自己的 data 对象，不会引起共享问题。

3. 涉及到 Vue 响应式原理：

　　data 中的属性会被递归的利用 Object.defineProperty 进行数据劫持，设置属性的 get 和 set 方法。

4. Vue 中的 data 一旦被观察过，那么之后向其中添加的属性，就不再是响应式的属性，这个后面会详细介绍，因为还涉及到一个问题：data 中数组、对象是响应式的吗 ？

5. 实例创建后，可以通过 vm.$data 访问 data 对象，同时 Vue 实例也代理了 data 对象上的所有属性，因此有两种方式访问属性，vm.$data.xxx / vm.xxx 【xxx为属性名】，以 _ 或 $ 开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些 property。

Example：

<script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        message: 'Hello Vue-API-data.'
      }
    }
  });
  console.log(app.$data);
  console.log(app.$data.message);
  console.log(app.message)
</script>

 6. 对 4. 进行扩展补充：参考官方文档：https://cn.vuejs.org/v2/guide/reactivity.html

　　个人博客链接：https://www.cnblogs.com/twinkleG/p/15389951.html