data一定是函数

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

1.验证data必须是函数

下面代码会出现的问题：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
     <div id="app"></div>

     <template id="myTemplate">
         <div>{{message}}</div>
     </template>
 <script src="js/vue.js"></script>
 <script>
     Vue.component('my-component', {
         template: '#myTemplate',
         data:{
             message:'你好,中国!'
         }
     })

     new Vue({
         el:'#app'
     })
 </script>
 </body>
 </html>

代码运行结果：

vueb1.png

正确的写法：

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

2.data必须在函数中返回

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <div id="app">
      <simple-counter></simple-counter>
      <simple-counter></simple-counter>
      <simple-counter></simple-counter>
   </div>

   <template id="myComponent">
        <button @click="counter += 1">
           {{counter}}
        </button>
   </template>
<script src="js/vue.js"></script>
<script>

    var data = { counter: 0 }

    Vue.component('simple-counter', {
        template: '#myComponent',
        /*
         data 是一个函数，因此 Vue 不会警告，
         但是我们为每一个组件返回了同一个对象引用
        */
        data: function () {
            return data
        }
    })

    new Vue({
        el: "#app"
    })
</script>
</body>
</html>

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

vueb2.png

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

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

vueb3.png

2-2 vue data一定是函数

2-2 vue data一定是函数

data一定是函数

1.验证data必须是函数

2.data必须在函数中返回

推荐阅读更多精彩内容