前言
我们需要先复习下原型链的知识,其实这个问题取决于 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进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理