vue 组件的data属性

当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

案例：

 Vue.component("zidingyi", {
            template: "#tpl",
            // 组件的data不能直接定义成对象  而是一个函数 让这个函数返回一个对象的定义代码
            data: function () {
                return {
                    name: "小白"
                }
            }
        })
         var v1 = new Vue({
            el: "#app",
            data: {}
        })

<div id="app">
        <zidingyi></zidingyi>
        <zidingyi></zidingyi>
</div>
<template id="tpl">
        <h1>我是一个{{name}}</h1>
</template>

【注】
为什么要返回一个对象的定义呢？
因为Vue在解析组件的时候会执行data的函数，如果返回的是一个其他地方的对象，那么这第一个组件的实例使用的是这个对象。如果该组件又有了一个实例，这个新实例依旧会使用同一个对象来作为自己的数据，那么就意味着一个数据对象对应两个组件。
如果返回的是对象的字面量定义代码，每当这个函数执行就会在内存中生成一个新的对象， 也就意味着每一个组件对应一个属于自己的数据对象。