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

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

源码中找答案：src\core\instance\state.js - initData()
函数每次执行都会返回全新data对象实例
测试代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="demo">
    <h1>vue组件data为什么必须是个函数？</h1>
    <comp></comp>
    <comp></comp>
</div>
<script src="./js/vue.js"></script>
<script>
    /**
     * 我的居然没有报错提示！
     */

    Vue.component('comp', {
        template: `<div @click="counter++">{{counter}}</div>`,
        data: {counter: 0}
    })

    // 创建实例
    const app = new Vue({
        el: '#demo'
    })

</script>
<script>

</script>
</body>
</html>

程序甚至无法通过vue检测
不出意外的话你将会看到下面的报错提示！

结论

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

posted @ 2021-06-18 21:54  lvhanghmm  阅读(70)  评论(0)    收藏  举报