#为何data是个函数？

#数据隔离的重要性

在Vue中，组件是可复用的单元，一个组件可能会在多个地方被实例化。如果data是简单的对象，那么所有组件实例将共享同一份数据对象，这会导致状态的混乱——一个实例对数据的修改会影响到其他所有实例。为了解决这个问题，Vue要求data是一个函数，每次组件实例化时，都会调用该函数生成一个独立的数据对象副本，从而确保每个组件实例的数据相互隔离。

#直接使用对象

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
          // 错误示范：共享数据对象
const badComponent = {
  data: {
    message: 'Hello Vue!'
  }
};

new Vue({
  components: { badComponent },
  template: `
    <div>
      <bad-component></bad-component>
      <bad-component></bad-component>
    </div>
  `
});

        

在这个错误示范中，如果两个<bad-component>修改message，它们将会看到彼此的修改，因为它们实际上共享了同一个数据对象。

#使用函数形式

          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
          // 正确实践：函数返回数据对象
const goodComponent = {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};

new Vue({
  components: { goodComponent },
  template: `
    <div>
      <good-component></good-component>
      <good-component></good-component>
    </div>
  `
});

        

通过将data定义为一个返回新数据对象的函数，每个<good-component>实例都拥有了自己的message属性副本，彼此间不会互相影响，保证了组件的独立性。