Vue组件为什么data必须是一个函数
更新时间：2020年06月11日 10:49:47 作者：前端大白96
这篇文章主要介绍了Vue组件为什么data必须是一个函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
我们需要先复习下原型链的知识，其实这个问题取决于 js ，而并非是 vue 。
function Component(){
this.data = this.data
}
Component.prototype.data = {
name:'jack',
age:22,
}
首先我们达成一个共识（没有这个共识，请补充下 js 原型链部分的知识）：
- 实例它们构造函数内的this内容是不一样的。
- Component.prototype ，这类底下的方法或者值，都是所有实例公用的。
解开疑问
基于此，我们来看看这个问题：
function Component(){
}
Component.prototype.data = {
name:'jack',
age:22,
}
var componentA = new Component();
var componentB = new Component();
componentA.data.age=55;
console.log(componentA,componentB)
此时，componentA 和 componentB data之间指向了同一个内存地址，age 都变成了 55， 导致了问题！
接下来很好解释为什么 vue 组件需要 function 了：
function Component(){
this.data = this.data()
}
Component.prototype.data = function (){
return {
name:'jack',
age:22,
}
}
var componentA = new Component();
var componentB = new Component();
componentA.data.age=55;
console.log(componentA,componentB)
此时，componentA 和 componentB data之间相互独立, age 分别是 55 和 22 ，没有问题！
总结
自己突然对这个问题懵逼，不过事后想了想还是自己基础知识忘得太快。以前学习 js 的时候，最基础的：构造函数内和原型之间的区别都模糊了。想不到 vue 这个小问题让我温故而知新了一次。
到此这篇关于Vue组件为什么data必须是一个函数的文章就介绍到这了,更多相关Vue组件data是函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章给大家总结了Visual Studio Code断点调试Vue的方法以及心得分享，需要的朋友参考学习下。2018-02-02
sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。这篇文章主要介绍了vue中使用sessionStorage记住密码功能,需要的朋友可以参考下2018-07-07
这篇文章主要为大家详细介绍了vue3封装轮播图组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
vue响应式系统之observe、watcher、dep的源码解析
这篇文章主要介绍了vue响应式系统之observe、watcher、dep的源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
vue router进行路由跳转并携带参数的实例详解(params/query)
在使用`router.push`进行路由跳转到另一个组件时，可以通过`params`或`query`来传递参数，这篇文章主要介绍了vue router进行路由跳转并携带参数（params/query）,需要的朋友可以参考下2023-09-09
vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率，这篇文章主要介绍了vue-devtools的安装,需要的朋友可以参考下2023-08-08
vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)
这篇文章主要介绍了vue3.0 移动端二次封装van-uploader上传图片组件,此功能最多上传6张图片，并可以实现本地预览，实现代码简单易懂，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue router如何实现tab切换，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文主要介绍了Vue3使用element-plus实现弹窗效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了Vuex 使用 v-model 配合 state的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
最新评论