Vue组件中data的使用方式

全局组件中的data使用方式：
js中写法：

Vue.component("mycom1",{
    template:'<h1>这是全局组件--{{msg}}</h1>',
    data:function () {
        return {
            msg:'这是全局组件中的data定义的数据'
        }
    }
});
var vm = new Vue({
    el:"#newBrand",
    data:{},
    }）；

html中写法：

<div id="newBrand">
	<mycom1></mycom1>
</div>

效果：

注：为什么组件中的data一定是一个function？
为了每个实例可以维护一份被返回对象的独立的拷贝，如果 Vue 没有这条规则，点击一个按钮就可能会整体同时更新，如：