前言
在 Vue 中，响应式数据创建有多种方法。在上一篇中，讲解了如何使用ref创建基本类型的响应式数据，那么对应的对应对象类型也是有响应的创建方式的，本文要介绍的是reactive 创建，对象类型的响应式数据，以及 reactive 和 ref 的使用方法以及它们之间的区别。
1. reactive 创建：对象类型的响应式数据
作用
reactive 用于定义一个响应式对象。注意，基本类型不要使用 reactive，而应使用 ref，否则会报错。
语法
代码语言：javascript复制let 响应式对象 = reactive(源对象);返回值
一个 Proxy 的实例对象，简称：响应式对象。
注意点
reactive 定义的响应式数据是“深层次”的。
案例代码
引入reactive 用于创建响应式对象数据，包括单个对象数据，多个对象数据以及多层结构。在模板调用的时候。直接使用reactive 对象名.属性名 获取数据，无需.value，直接使用即可。
代码语言：js复制<template>
<div class="person">
<!-- 使用reactive 对象名.属性名 获取数据，无需.value，直接使用即可。 -->
<h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
<h2>游戏列表：</h2>
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
<h2>测试：{{ obj.a.b.c.d }}</h2>
<button @click="changeCarPrice">修改汽车价格</button>
<button @click="changeFirstGame">修改第一游戏</button>
<button @click="test">测试</button>
</div>
</template>
<script lang="ts" setup name="Person_Vue3_Reactive">
// 引入reactive 用于创建响应式对象数据
import {reactive} from 'vue'
// 单个对象数据
let car = reactive({brand: '奔驰', price: 100})
// 多个对象数据
let games = reactive([
{id: 'ahsgdyfa01', name: '英雄联盟'},
{id: 'ahsgdyfa02', name: '王者荣耀'},
{id: 'ahsgdyfa03', name: '原神'}
])
// 多层级对象
let obj = reactive({
a: {
b: {
c: {
d: 666
}
}
}
})
// 响应方法
function changeCarPrice() {
car.price = 10
}
function changeFirstGame() {
games[0].name = '流星蝴蝶剑'
}
function test() {
obj.a.b.c.d = 999
}
// 使用setup语法糖，无需return返回值
</script>2. ref 创建：对象类型的响应式数据
ref 也可以接收基本类型和对象类型的数据。若接收的是对象类型，内部其实也是调用了 reactive 函数。
案例代码
ref创建的变量必须使用.value（可以使用volar插件自动添加.value），这个也是使用ref创建响应对象与reactive的一个区别之一。
代码语言：js复制<script lang="ts" setup name="Person_Vue3_Reactive">
import { ref } from 'vue'
// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([
{ id: 'ahsgdyfa01', name: '英雄联盟' },
{ id: 'ahsgdyfa02', name: '王者荣耀' },
{ id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({
a:{
b:{
c:{
d:666
}
}
}
})
console.log(car)
// 使用ref 改变响应数据需要.value
function changeCarPrice() {
car.value.price = 10
}
function changeFirstGame() {
games.value[0].name = '流星蝴蝶剑11'
}
function test(){
obj.value.a.b.c.d = 999
}
</script>3. ref 对比 reactive
接下来就从不容角度对比一下这两者的区别。
从宏观角度看：
ref用来定义基本类型数据、对象类型数据；reactive用来定义对象类型数据。
区别
ref创建的变量必须使用.value访问（可以使用 Volar 插件自动添加.value）；reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
使用原则
- 若需要一个基本类型的响应式数据，必须使用
ref； - 若需要一个响应式对象，层级不深，
ref和reactive都可以； - 若需要一个响应式对象，且层级较深，推荐使用
reactive。
