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

最新推荐文章于 2023-07-27 00:02:29 发布

seeyousayhi

最新推荐文章于 2023-07-27 00:02:29 发布

阅读量111

点赞数 1

分类专栏：技术分享文章标签： js vue html5

本文链接：https://blog.csdn.net/seeyousayhi/article/details/108586519

版权

技术分享专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

源码位置：
src\core\instance\state.js - initData()
\src\core\instance\init.js
函数每次执行都会返回全新的data对象实例
上测试代码：

<script src="./dist/vue.js"></script>

<body>
    <div id="app">
        <test></test>
    </div>
    <script>
        Vue.component('test', {
            template: '<div @click="count++>{{count}}</div>',
            data: {count: 1}
        })
        let vm = new Vue({
            el: '#app',
        })
    </script>

看控制台，报错了：
在这里插入图片描述
意思是组件中声明data的时候应该是一个function，问题来了
根实例直接用对象定义没问题，组件中就不行，为什么呢，现在我们进到源码中来（init.js）：

从这里我们可以看到如果是组件走if，否则走else，也就是new Vue()的时候走else,此时改一下测试代码再继续（把组件中声明data方式改成function），我们在mergeOptions中打断点，进去看一下
在这里插入图片描述
执行到这，再打断点，可以清楚的看到，test组件创建构造函数的时候， vm是undefined，然后放过去断点，到根实例创建时回到这里：

可以发现vm是存在的，所以第一次执行的时候，创建test组件构造函数的时候，vm不存在，if(!vm)为true就执行下一行的校验，typeof childVal ！== ‘function’，如果你传入的是data: {count: 1}，报错。
第二次执行，vm存在，跳过这里，不走检验。

代码流程过完了，总结一下：

Vue组件可能存在多个实例，如果用对象形式定义data则会导致他们公用一个data对象，那么状态变化将会影响所有组件实例，这是不合理的。
如果用函数形式定义，再initData的时候会将它作为工厂函数返回，规避多实例之间状态污染的问题。并且Vue根实例创建的时候，根只有一个，不会有这种情况。

seeyousayhi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件data为什么必须是个函数而跟实例则没有此限制？

Vue组件data为什么必须是个函数而跟实例则没有此限制？源码位置：src\core\instance\state.js - initData()\src\core\instance\init.js函数每次执行都会返回全新的data对象实例上测试代码：<script src="./dist/vue.js"></script><body> <div id="app"> <test></test>
复制链接

扫一扫