Vue组件为什么data必须是一个函数

网络编程 2021-07-04 15:03www.168986.cn编程入门

这篇文章主要介绍了Vue组件为什么data必须是一个函数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

前言

我们需要先复习下原型链的知识，其实这个问题取决于 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 ponentA = new Component();
var ponentB = new Component();
ponentA.data.age=55;
console.log(ponentA,ponentB)

此时，ponentA 和 ponentB data之间指向了同一个内存地址，age 都变成了 55，导致了问题！

接下来很好解释为什么 vue 组件需要 function 了

function Component(){
 this.data = this.data()
}
Component.prototype.data = function (){
  return {
  name:'jack',
  age:22,
}
}
var ponentA = new Component();
var ponentB = new Component();
ponentA.data.age=55;
console.log(ponentA,ponentB)

此时，ponentA 和 ponentB data之间相互独立, age 分别是 55 和 22 ，没有问题！

自己突然对这个问题懵逼，不过事后想了想还是自己基础知识忘得太快。以前学习 js 的时候，最基础的构造函数内和原型之间的区别都模糊了。想不到 vue 这个小问题让我温故而知新了一次。

到此这篇关于Vue组件为什么data必须是一个函数的文章就介绍到这了,更多相关Vue组件data是函数内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！

上一篇：Vue初始化中的选项合并之initInternalComponent详解下一篇：Vue实现点击箭头上下移动效果

Vue组件为什么data必须是一个函数

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

Vue组件为什么data必须是一个函数

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设