Vue3响应式方法区别：ref、reactive、shallowRef和shallowReactive

Vue 3的响应性系统是其数据绑定的核心，它使得在响应式状态发生变化时，自动更新DOM成为可能。在本文中，我们将深入探讨Vue 3中四种重要的响应性方法：ref、reactive、shallowRef和shallowReactive，并为你清晰解释它们的用途和区别。

一、ref()：简单而强大

ref()是Vue 3中官方推荐的创建可变和响应式值的方式。它可用于处理原始值和非原始值，并支持深度响应性，即嵌套对象和数组内部的属性也是响应式的。这一方法使得在访问值时需要使用.value。

示例：

xml 复制代码

<template>
  <h1>{{ student.age }}</h1>
  <button @click="addAge">点击我</button>
</template>

<script setup>
import { ref } from "vue";

const student = ref({
  name: "Tsz",
  age: 20
});

function addAge() {
  student.value.age += 10;
}
</script>

二、shallowRef()：性能优化的选择

shallowRef()与ref()类似，但它不支持深度响应性。只有通过.value访问时具有响应性，对状态的嵌套对象属性或数组元素的修改不会触发响应性。这一方法在需要优化性能并避免不必要的深度响应性跟踪时非常有用。

示例：

xml 复制代码

<template>
  <h1>{{ student.name }}</h1>
  <button @click="changeName">更改姓名</button>
</template>

<script setup>
import { shallowRef } from "vue";

const student = shallowRef({
  name: "Tsz",
  age: 20,
  comments: ["好文", "继续努力"]
});

function changeName() {
  student.value.name = "Alice";
  student.value.comments.push("我喜欢它");
}
</script>

三、reactive()：对象的完全响应性

reactive()是用于在Vue 3中声明具有多个属性的对象的方法。使用reactive，整个对象变得响应式，包括对象内部的属性。这意味着对象内的属性会在更改时自动触发视图更新。

示例：

xml 复制代码

<template>
  <div>
    <h1>{{ student.name }}</h1>
    <p>年龄: {{ student.age }}</p>
    <button @click="updateStudent">更新学生信息</button>
  </div>
</template>

<script setup>
import { reactive } from "vue";

const student = reactive({
  name: "Tsz",
  age: 20
});

function updateStudent() {
  student.name = "Alice";
  student.age = 25;
}
</script>

四、shallowReactive()：根属性的响应性

shallowReactive() 与 reactive() 类似，但不同之处在于它只会使对象本身变得响应式，而不会深度追踪对象内部属性的变化。这意味着只有对象的属性被修改时才会触发响应，而对象内部嵌套的属性不会自动触发响应。

示例：

xml 复制代码

<template>
  <div>
    <h1>{{ student.name }}</h1>
    <p>年龄: {{ student.age }}</p>
    <button @click="updateStudent">更新学生信息</button>
  </div>
</template>

<script setup>
import { shallowReactive } from "vue";

const student = shallowReactive({
  name: "Tsz",
  age: 20,
  comments: ["好文", "继续努力"]
});

function updateStudent() {
  student.name = "Alice";
  student.age = 25;
  student.comments.push("我喜欢它");
}
</script>

在Vue 3中，根据你的具体需求，选择适当的方法可以帮助你提高开发效率并优化性能。希望本文对你理解Vue 3的响应性方法有所帮助。如果大家对这些方法有任何疑问可以留言讨论。