前言
我们需要先复习下原型链的知识,其实这个问题取决于 js ,而并非是 vue 。
function Component(){ this.data = this.data } Component.prototype.data = { name:'jack', age:22, }
首先我们达成一个共识(没有这个共识,请补充下 js 原型链部分的知识):
解开疑问
基于此,我们来看看这个问题:
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 ,没有问题!
总结
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理