2-2 vue data一定是函数

data一定是函数

• data必须是函数
  • 使用组件时，大多数可以传入到 Vue 构造器中的选项都可以在 Vue.extend() 或Vue.component()中注册组件时使用，但组件中data是个例外, data 必须是函数。

1.验证data必须是函数

• 下面代码会出现的问题：

• 代码运行结果：

  
  
  

  vueb1.png

• 正确的写法：

Vue.component('my-component', {
     template: '#myTemplate',
     data: function () {
         return {
             message: '你好,中国'
         }
     }
 })

2.data必须在函数中返回

• 注意：如果data选项指向某个对象，这意味着所有的组件实例共用一个data。
  我们应当使用一个函数作为 data 选项，让这个函数返回一个新对象。

• 注意: 在外面定义对象, 然后在data()中返回这个对象, 那么所有组件用的对象都是同一个对象

  • 运行结果，这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！

vueb2.png

- 解决办法：为每个组件返回新的 data 对象来解决这个问题！

```
  data: function () {
        return {
            counter: 0
        }
    }
```

vueb3.png