Vue组件中data一定是函数吗?
不懂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一定是函数吗?
本文URL:http://pwwzsj.com/article/jsdjog.html