vue data为什么是一个函数

最新推荐文章于 2025-10-05 14:46:45 发布

原创最新推荐文章于 2025-10-05 14:46:45 发布 · 856 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

VUE知识专栏收录该内容

6 篇文章

订阅专栏

Vue组件的data属性作为函数使用是为了确保每个组件实例都有独立的数据副本，防止实例间数据意外共享。当data是对象时，所有组件实例会共享同一数据，而函数返回的对象则在每次创建新实例时返回新的副本，确保实例间数据的独立性。这是JavaScript原型继承特性的应用，与Vue设计原则一致，保证组件的可复用性和状态独立。

1、 vue的data为什么是返回一个函数呢

从原型链开始讲

var MyComponent = function() {}
MyComponent.prototype.data = {
  a: 1,
  b: 2,
}
上面是一个虚拟的组件构造器，真实的组件构造器方法很多

var component1 = new MyComponent()
var component2 = new MyComponent()
上面实例化出来两个组件实例，也就是通过<my-component>调用，创建的两个实例

component1.data.a === component2.data.a // true
component1.data.b = 5
component2.data.b // 5

显然当component1.data.b发生改变时，我们是不希望component2.data.b也发生改变的
我们需要将实例都能拿到唯一的data方法

var MyComponent = function() {
  this.data = this.data()
}
MyComponent.prototype.data = function() {
  return {
    a: 1,
    b: 2,
  }
}

这样每一个实例的data属性都是独立的，不会相互影响了。所以，你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的，跟vue本身设计无关

再来看看官网说的：

组件是可复用的Vue实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods
每个组件都会各自独立维护它的 data。
你每用一次组件，就会有一个它的新实例被创建。
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝