当前位置：首页 > article >正文

【VUE】Vue中的data属性为什么是一个函数而不是一个对象

article 2024/10/18 14:50:51

在 Vue.js 中，组件的 data 属性可以是一个对象或者一个函数
但通常建议将其设置为函数。这是因为组件可能会被多次使用，如果 data 是一个普通对象，那么该对象会被所有实例共享，导致数据混乱。
将 data 设置为一个函数可以保证每个组件实例都有自己独立的数据对象，从而避免数据混乱的问题。具体来说，当 data选项是一个函数时，Vue.js 在创建新实例时会调用该函数并返回一个全新的数据对象，这样每个实例都拥有独立的数据对象。

在 Vue.js 中，我们通常将一个组件的数据定义在 data 属性中。当我们要创建一个新实例时，Vue.js 会将这个 data 对象进行深度拷贝，并返回给新实例作为其数据对象。然而，如果我们每次都使用同一个普通对象来定义 data，那么由于 JavaScript 中对象的引用传递特性，所有实例共享的是同一个对象，这可能会导致一些难以排查的问题。

为了避免这种情况，Vue.js 建议我们将 data 定义为一个函数。这样，在创建新实例时，Vue.js 会调用该函数并返回一个全新的数据对象，从而保证每个实例都有自己独立的数据对象，防止数据混乱的问题。下面我们通过一些代码示例来更好地理解这种做法：

// 在实例化组件时，data 属性为一个普通对象
const vm1 = new Vue({
  data: {
    count: 0
  }
})

const vm2 = new Vue({
  data: {
    count: 0
  }
})

// 修改 vm1 中的 count 值
vm1.count++

console.log(vm1.count) // 输出 1
console.log(vm2.count) // 输出 0

上述代码中，我们实例化了两个不同的 Vue 实例，并且它们的 data 属性都设置为 { count: 0 }。接着，我们修改了其中一个实例的 count 值，发现另一个实例的 count 值没有改变，这是因为每个实例都有自己独立的数据对象。

但是，如果我们把 data 改成一个函数，就会看到不同的结果：

// 在实例化组件时，data 属性为一个函数
const vm1 = new Vue({
  data() {
    return {
      count: 0
    }
  }
})

const vm2 = new Vue({
  data() {
    return {
      count: 0
    }
  }
})

// 修改 vm1 中的 count 值
vm1.count++

console.log(vm1.count) // 输出 1
console.log(vm2.count) // 输出 1