观察数组和对象 (Vue 3) - Javascript

Vue 3 提供了对数组和对象的观察功能，这使得 Vue 3 可以很好地监听这些数据的变化，并在发生变化时及时更新用户界面。

观察对象

我们可以使用 reactive 函数来创建一个被 Vue 3 观察的对象。

import { reactive } from 'vue'

const user = reactive({
  name: '张三',
  age: 20,
  address: {
    province: '广东省',
    city: '深圳市',
  },
})

这样，我们就创建了一个名为 user 的观察对象。它包含了 name、age 和 address 三个属性，其中 address 属性又包含了 province 和 city 两个子属性。

我们可以对这些属性进行修改，Vue 3 会自动跟踪这些修改，并触发更新。

// 修改 name 属性
user.name = '李四'

// 修改 address 中的 city 属性
user.address.city = '广州市'

观察数组

同样地，我们可以使用 reactive 函数来创建一个被 Vue 3 观察的数组。

import { reactive } from 'vue'

const numbers = reactive([1, 2, 3, 4, 5])

这样，我们就创建了一个名为 numbers 的观察数组。

我们可以对这个数组进行修改，Vue 3 会自动跟踪这些修改，并触发更新。

// 添加元素
numbers.push(6)

// 删除元素
numbers.pop()

// 修改元素
numbers[0] = 0

观察限制

虽然 Vue 3 可以观察对象和数组，但是它并不能观察所有属性或数组方法。

在对象中，Vue 3 只能观察已经存在的属性。如果我们添加一个新属性，Vue 3 不会观察它。

在数组中，Vue 3 也只能观察特定的数组方法。以下是 Vue 3 支持的数组方法：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

如果我们使用其他数组方法，Vue 3 不会观察它们所产生的变化。这时，我们需要手动调用 trigger() 函数来通知 Vue 3 更新。

import { trigger } from '@vue/reactivity'

// 使用 fill() 方法修改数组
numbers.fill(0)

// 手动触发更新
trigger(numbers, 'length')