vue3从精通到入门8：reactive的使用

reactive 是 Vue 3 响应式系统中的核心 API 之一，它用于将一个普通的 JavaScript 对象转换为响应式对象。当这个对象的属性发生变化时，Vue 3 能够自动追踪并通知所有依赖这个属性的组件进行更新。

reactive

TypeScript 复制代码

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

这是reactive源码，它的传参限制只能使用引用类型；

基础语法：

html 复制代码

<template>  
  <div>  
    <p>Count: {{ count }}</p>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script setup lang="ts">  
import { reactive } from 'vue';  
  
// 使用 reactive 创建响应式状态  
const state = reactive({  
  count: 0,  
});  
  
// 定义方法  
const increment = () => {  
  state.count++;  
}  

</script>

reactive对其赋值：

TypeScript 复制代码

<template>  
  <div>  
    <p>Name: {{ name }}</p>  
    <p>Age: {{ age }}</p>  
    <button @click="updatePerson">Update Person</button>  
  </div>  
</template>  
  
<script setup lang="ts">  
import { reactive } from 'vue';  
  
// 使用 reactive 创建响应式对象  
const person = reactive({  
  name: 'John Doe',  
  age: 30,  
});  
  
// 定义方法，用于更新 person 对象  
const updatePerson = () => {  
  person.name = 'Jane Doe';  
  person.age = 35;  
}  

</script>

看到我是把person里的属性一个个的赋值的，那我们为什么不能直接赋值呢！

TypeScript 复制代码

// 定义方法，用于更新 person 对象  
const updatePerson = () => {  
  person = {
      name: 'Jane Doe',
      age: 35
  }
}

注意：reactive直接赋值会失去响应式。

我们可以这样：

TypeScript 复制代码

<template>  
  <div>  
    <p>Name: {{ name }}</p>  
    <p>Age: {{ age }}</p>  
    <button @click="updatePerson">Update Person</button>  
  </div>  
</template>  
  
<script setup lang="ts">  
import { reactive } from 'vue';  
  
// 使用 reactive 创建响应式对象  
const person = reactive({  
  info: {
    name: 'John Doe',  
    age: 30
  }
});  
  
// 定义方法，用于更新 person 对象  
const updatePerson = () => {  
  person.info = {
      name: 'Jane Doe',
      age: 35
  }
}  

</script>

shallowReactive

shallowReactive 用于创建一个响应式对象的浅层代理。这意味着只有对象的顶层属性是响应式的，如果属性本身是一个对象或数组，那么它们不会被递归地转换为响应式。

html 复制代码

<template>  
  <div>  
    <p>Name: {{ user.name }}</p>  
    <p>Age: {{ user.age }}</p>  
    <button @click="updateName">Update Name</button>  
  </div>  
</template>  
  
<script setup lang="ts">  
import { shallowReactive } from 'vue';  
  
// 假设我们有一个复杂的用户对象，但我们只关心 name 和 age 的变化  
const initialState = {  
  user: {  
    name: 'John Doe',  
    age: 30,  
    address: {  
      street: '123 Main St',  
      city: 'Anytown',  
      // ... 可能还有其他深层嵌套属性  
    },  
  },  
};  
  
// 使用 shallowReactive 创建浅层响应式对象  
const state = shallowReactive(initialState);  
  
// 定义方法，用于更新 name 属性  
function updateName() {  
  state.user.name = 'Jane Doe';  // 响应式的
  state.user.address = {...}； // 非响应式的  
}  
</script>

使用 shallowReactive 函数创建了 state 对象，它是对 initialState 的一个浅层响应式代理。这意味着只有 state.user、state.user.name 和 state.user.age 是响应式的，而 state.user.address 及其子属性不是响应式的。

readonly

readonly 函数可以用来创建一个只读的响应式代理，这意味着代理对象的属性是只读的，不能被修改。

html 复制代码

<template>  
  <div>  
    <p>Name: {{ userInfo.name }}</p>  
    <p>Age: {{ userInfo.age }}</p>  
    <!-- 注意：尝试修改 userInfo 的属性会导致错误 -->  
  </div>  
</template>  
  
<script setup lang="ts">  
import { readonly, ref } from 'vue';  
  
// 创建一个响应式对象  
const userInfo = ref({  
  name: 'John Doe',  
  age: 30,  
});  
  
// 使用 readonly 创建一个只读的响应式代理  
const readOnlyUserInfo = readonly(userInfo);  
</script>