vue组件中的data为什么必须是个函数,而vue的根实例则没有此限制?
源码中找答案: src/core/instance/state.js
函数每次执行都会返回全新的data对象实例
测试代码
<body>
<div id="demo">
<h1>vue组件为什么必须是个函数</h1>
<comp></comp>
<comp></comp>
</div>
<script src="../../dist/vue.js"></script>
<script>
//创建组件
Vue.compontent('comp',{
template:'<div @click="counter++">{{counter}}<div>'
/*
这种对象形式的data声明是不过得,源码中会先对data类型判断
如果是个函数先执行并将结果作为结果作为data
**/
//data:{{cuonter:0}}
//这种的是可以过去的,目的就是在多组件的时候避免数据的污染
data:()=>{
ruturn {
cuonter:0
}
}
})
//创建根实例
const app = new Vue({
el: '#demo',
data:{{
//根实例只有一个,不会造成数据的污染,所以可以用
cuonter:0
}}
})
</script>
</body>
结论
Vue组件可能存在多个实例,如果使用对象形式定义data则会导致他们共用一个data对象,name状态变更会影响所有组件实例,这是不合理的;采用函数形式定义,在initData时会将其作为工厂函数返回全新data对象,有效规避实例之间状态污染问题,而在Vue根实例创建过程中则不存在该限制,也是因为根实例只能有一个,不需要担心这种情况.
