Vue组件data为什么必须是个函数而Vue的根实例则没有此限制---成都维森凯睿梁老师
Posted on 2020-08-27 14:01 天行健，峰临天下 阅读(115) 评论(0) 收藏 举报去源代码里面找答案，测试如下。
<!DOCTYPE html>
<html>
<head>
<title>Vue事件处理</title>
</head>
<body>
<div id="demo">
<h1>vue组件data为什么必须是个函数? </h1>
<comp></comp>
<comp></comp>
</div>
<script src="../../dist/vue.js"></script>
<script>
Vue.component('comp', {
template:'<div @click="counter++">{{counter}}</div>', data: {counter: 0}
})
// 创建实例
const app = new Vue({ el: '#demo',
});
</script>
</body>
</html>
结论：
Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态 变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返 回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也 是因为根实例只能有一个，不需要担心这种情况。
浙公网安备 33010602011771号