Vue 3 第五章：reactive全家桶

1. reactive

• 实现引用类型数据的响应式，如数组、对象等
• 上一章说到的ref去创建引用类型的响应式，其实内部也是调用了reactive
• reactive创建的响应式对象，调用时不用.value

在Vue3中，reactive函数是用于创建响应式对象的函数。它接收一个普通对象作为参数，返回一个代理对象。这个代理对象可以拦截对象的get和set操作，并在其中实现响应式的逻辑。当我们读取代理对象的属性时，会触发依赖收集；当我们修改代理对象的属性时，会触发相应的依赖更新。在调用reactive函数时，Vue3会使用Proxy对象对传入的对象进行代理，从而实现响应式的特性。

1.1. reactive函数创建一个响应式对象

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Tom'
})

console.log(state.count) // 输出 0

state.count++

console.log(state.count) // 输出 1

在这个例子中，我们使用reactive函数创建了一个响应式对象state，它包含两个属性count和name。我们可以直接读取和修改state的属性，不需要使用.value。当我们读取或修改state的属性时，会触发相应的依赖更新。

1.2. 修改reactive创建的响应式对象的属性

import { reactive } from 'vue'

const state = reactive({
  user: {
    name: 'Tom',
    age: 18
  }
})

console.log(state.user.name) // 输出 Tom

state.user.name = 'Jerry'

console.log(state.user.name) // 输出 Jerry

在这个例子中，我们修改了state对象中嵌套的user对象的name属性。这个修改会触发相应的依赖更新，从而实现了响应式的特性。

2. readOnly

在 Vue 3 中，可以使用 readonly 函数创建一个只读的响应式对象。它接收一个普通对象作为参数，返回一个只读的代理对象。这个代理对象只能读取属性的值，不能修改属性的值。当我们读取代理对象的属性时，会触发依赖收集；当我们尝试修改代理对象的属性时，会输出警告信息，不会触发相应的依赖更新。在调用 readonly 函数时，Vue 3 会使用 Proxy 对象对传入的对象进行代理，从而实现只读的响应式特性。

2.1. 使用 readonly 函数创建一个只读的响应式对象

import { readonly, reactive } from 'vue'

const state = readonly(reactive({
  count: 0,
  name: 'Tom'
}))

console.log(state.count) // 输出 0

state.count++ // 输出警告信息，不会触发依赖更新

console.log(state.count) // 输出 0

注意：使用 readonly 函数创建的只读响应式对象是深层只读的。也就是说，当我们尝试修改嵌套在只读响应式对象中的对象时，会输出警告信息，不会触发相应的依赖更新。

2.2. 如何修改嵌套在只读响应式对象中的对象?

• 使用readOnly函数创建的只读对象，内部的属性无法修改

import { readonly, reactive } from 'vue'

const state = readonly(reactive({
  user: {
    name: 'Tom',
    age: 18
  }
}))

console.log(state.user.name) // 输出 Tom

state.user.name = 'Jerry' // 输出警告信息，不会触发依赖更新

console.log(state.user.name) // 输出 Tom

在这个例子中，我们尝试修改只读响应式对象 state 中嵌套的 user 对象的 name 属性。这个修改会输出警告信息，不会触发相应的依赖更新，从而实现了只读响应式的特性。在实际开发中，readonly 函数是非常有用的一个函数，可以帮助我们创建只读的响应式数据。

3. shallowReactive

• 创建浅层的响应式对象
• 修改内部属性时，只改变值，不更新视图

在 Vue 3 中，可以使用 shallowReactive 函数创建一个浅层响应式对象。它接收一个普通对象作为参数，返回一个浅层响应式代理对象。这个代理对象只能处理对象的一级属性，不能处理嵌套在对象中的属性的响应式更新。当我们读取代理对象的属性时，会触发依赖收集；当我们修改代理对象的属性时，会触发相应的依赖更新。在调用 shallowReactive 函数时，Vue 3 会使用 Proxy 对象对传入的对象进行代理，从而实现浅层响应式特性。

3.1. 使用 shallowReactive 函数创建一个浅层响应式对象

import { shallowReactive } from 'vue'

const state = shallowReactive({
  user: {
    name: 'Tom',
    age: 18
  }
})

console.log(state.user.name) // 输出 Tom

state.user.name = 'Jerry'

console.log(state.user.name) // 输出 Jerry

state.user = {
  name: 'Lucy',
  age: 20
}

console.log(state.user.name) // 输出 Lucy

state.user.name = 'Lily'

console.log(state.user.name) // 输出 Lily

在这个例子中，我们使用 shallowReactive 函数创建了一个浅层响应式对象 state，包含一个属性 user，它是一个普通对象。当我们修改 state 的 user 属性时，会触发相应的依赖更新；当我们修改 user 对象的属性时，不会触发相应的依赖更新。

3.2. 如何修改嵌套在浅层响应式对象中的对象?

• 可以直接修改，但是只更新值，不更新视图

import { shallowReactive } from 'vue'

const state = shallowReactive({
  user: {
    profile: {
      name: 'Tom',
      age: 18
    }
  }
})

console.log(state.user.profile.name) // 输出 Tom

state.user.profile.name = 'Jerry'

console.log(state.user.profile.name) // 输出 Jerry

在这个例子中，我们尝试修改浅层响应式对象 state 中嵌套的 user 对象的 profile 属性中的 name 属性。这个修改不会触发相应的依赖更新，从而实现了浅层响应式的特性。

总结：这篇文章介绍了Vue3中用于创建响应式对象的三个函数：reactive、readonly和shallowReactive。reactive函数用于创建深层响应式对象，readonly函数用于创建深层只读响应式对象，shallowReactive函数用于创建浅层响应式对象。这些函数可以帮助我们快速创建响应式数据，实现数据的自动更新。