Vue 组件化中 data为什么是函数，return{}？

最新推荐文章于 2024-08-08 07:39:41 发布

web前端定做

最新推荐文章于 2024-08-08 07:39:41 发布

阅读量318

点赞数

CC 4.0 BY-SA版权

分类专栏： vue笔记文章标签： vue.js 前端 javascript

原文链接：https://zhuanlan.zhihu.com/p/374716953

vue笔记专栏收录该内容

13 篇文章

订阅专栏

本文探讨了JavaScript原型链的工作原理，通过示例解释了为何在Vue组件中需要使用函数来确保数据的独立性。当直接在原型上定义静态数据时，多个组件实例会共享同一数据，导致修改一个实例的属性会影响到其他实例。通过使用函数返回数据对象，每个组件实例都能拥有独立的数据副本，避免了此类问题。这是一次对JavaScript基础知识和Vue组件设计的回顾与理解深化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言
我们需要先复习下原型链的知识，其实这个问题取决于 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)