富贵资源网 Design By www.hznty.com

前言

我们需要先复习下原型链的知识,其实这个问题取决于 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 这个小问题让我温故而知新了一次。

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。