数据属性 Data

相关官方文档：

• Data Property 和方法

组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。为方便起见，该对象的任何顶级 property 也直接通过组件实例暴露出来：

1. 本质上，组件的 data 选项只是一个函数
2. 这个函数会在 Vue 创建组件实例时被调用
3. 这个函数会返回一个对象
4. 返回的这个对象会被 Vue 包装成响应式数据
5. 包装后的响应式数据，以 $data 的形式存储在组件实例中
6. 为方便，data 返回的对象的任何顶级属性可以直接通过组件实例直接拿到，前提是需要确保它们都在 data 函数返回的对象中
7. 如果直接在组件实例上添加新属性，虽然可以添加成功，但是由于它没有在响应式对象 $data 中，所以该属性不具有响应式
8. 在 data 返回的对象的属性，应避免使用 $ 和 _ 开头

原理分析

为什么 data 属性是一个函数而不是一个对象？

• 结论：data 定义可是函数也可以是对象，但是根组件实例化时可以是对象或函数，组件实例化只能是函数
• 原理：根实例是单例，不会产生数据污染；组件实例不是单例，为防止多个组件实例之间共用一个 data，产生数据污染，采用函数形式，初始化 data 时会将其作为工厂函数都会返回全新 data 对象