Vue3 源码解析：响应式数据 Reactive

2023-11-16 05:38:03

Vue3 中的响应式数据

在 Vue3 中，响应式数据是指能够自动追踪和更新依赖于它的组件的数据。当响应式数据发生变化时，Vue3 会自动更新所有依赖于它的组件。这使得 Vue3 能够高效地更新 UI，并减少不必要的渲染。

Reactive

Reactive 是 Vue3 中将引用数据类型变为响应式数据最常用的方法。它可以将对象或数组变为响应式数据。当响应式对象或数组中的属性发生变化时，Vue3 会自动更新所有依赖于它的组件。

const person = reactive({
  name: 'John',
  age: 30
})

person.name = 'Mary' // Vue3 会自动更新依赖于 person.name 的组件

shallowReactive

shallowReactive 与 Reactive 类似，但它只对对象或数组的第一层属性进行响应式处理。这意味着，如果对象或数组中的属性是一个对象或数组，那么该属性不会被响应式处理。

const person = shallowReactive({
  name: 'John',
  address: {
    street: '123 Main Street',
    city: 'Anytown'
  }
})

person.name = 'Mary' // Vue3 会自动更新依赖于 person.name 的组件
person.address.street = '456 Elm Street' // Vue3 不会更新依赖于 person.address.street 的组件

readonly

readonly 可以将对象或数组变为只读响应式数据。这意味着，对象或数组中的属性不能被修改。如果尝试修改只读响应式数据中的属性，Vue3 会抛出一个错误。

const person = readonly({
  name: 'John',
  age: 30
})

person.name = 'Mary' // Vue3 会抛出一个错误

deepReactive

deepReactive 可以将对象或数组及其所有嵌套属性变为响应式数据。这意味着，无论对象或数组中的属性是对象、数组还是基本类型，它们都会被响应式处理。

const person = deepReactive({
  name: 'John',
  address: {
    street: '123 Main Street',
    city: 'Anytown'
  }
})

person.name = 'Mary' // Vue3 会自动更新依赖于 person.name 的组件
person.address.street = '456 Elm Street' // Vue3 会自动更新依赖于 person.address.street 的组件