vue须知（2）—— Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？

2021-05-25 643 阅读1分钟

源码中找答案：src\core\instance\state.js - initData()

函数每次执行都会返回全新data对象实例

源码如下：会根据data的数据类型来进行不同的逻辑处理测试代码如下

<!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检测

下图中的源码可以看出，vue根实例的创建和vue组件实例的创建是不同的处理逻辑

总结：
Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；
采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。
而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。