实例和组件中 data 的区别？

实际上在实例中的 data 是可以写成对象的形式也可以写成函数的形式。 只有在组件中 data 必须写成函数的形式。

<script>
export default {
  data: {}, 
};
</script>

如果我们在组件中将 data 写成函数的形式，控制台就会报错。

组件中 data 定义对象和函数区别？

当我们定义好一个组件的时候，vue 最终都会通过 vue.extend() 构建成组件实例，这里我们采用构造函数的形式模拟。

<script>
// 模仿构造函数，定义data属性采用对象的形式
function Component() {}
Component.prototype.data = {
  count: 1,
};

// 创建两个组件实例
const componentA = new Component();
const componentB = new Component();

// 当修改其中一个组件的中的data值的时候，另一个组件的data值会一起改变
componentA.data.count = 2;
console.log(componentB.data.count); // 2
</script>

分析： 产生上面的原因是两个组件实例共享同一内存地址，当修改 componentA 的时候，componentB 会同步发生改变。

如果采用函数的写法？

<script>
// 模仿构造函数，定义data属性采用函数的形式
function Component() {
  this.data = this.data();
}
Component.prototype.data = function () {
  return {
    count: 1,
  };
};

// 创建两个组件实例
const componentA = new Component();
const componentB = new Component();

// 当修改其中一个组件的中的data值的时候，另一个组件的data值不会一起改变
componentA.data.count = 2;
console.log(componentB.data.count); // 1
</script>

分析：这是由于，函数返回的对象地址并不相同，这样每个组件中 data 都是独立的，这样修改其中一个组件不会影响其他组件中的 data 值。

总结

1. 在根组件中 data 可以是函数或者对象，不会造成数据污染。
2. 在组件中 data 必须是函数的写法，这样返回的组件实例中 data 都是独立的对象，不会发生数据污染。

扩展

vue 组件data用箭头函数行不行？

可以使用箭头函数，但是需要注意 this 指向。如果使用箭头函数，data 函数中的 this 不会指向 vue 实例，如果需要访问 vue 实例，可以通过 data 函数的参数来实现。

data: vm => ({ a: vm.myProp })