data是一个函数（vue笔记）

为什么data是一个函数？

在Vue实例中，data的作用是定义组件的响应式数据。但当你直接把data写为对象时，比如：

Vue.component('my-component', {
  data: {
    message: 'Hello 观众大老爷!'
  }
});

这个对象会被所有该组件的实例共享。如果多个实例同时使用一个data对象，那么一个实例修改了数据，其他实例也会跟着改变。这种共享显然不是我们想看到的，尤其是组件被复用时。

为了避免这种问题，Vue要求data是一个函数，并且返回一个对象。这样，每次创建组件实例时，Vue都会调用这个函数，生成一个新的数据对象，从而保证每个实例的数据是独立的。

正确写法是：

Vue.component('my-component', {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});