Vue3: 如何在 ref() 与 reactive() 之间做正确选择？

Composition API 提供了两种在组件中引入响应式状态的方式。因此，你需要在 ref()、reactive() 之间决定使用哪一个，或是两者都用。本文将帮助你做出正确的选择，但让我们先快速介绍一下这两种方式。

快速介绍

ref() 和 reactive() 用于跟踪其参数的更改。当使用它们初始化变量时，是向 Vue 提供信息：“嘿，每次这些变量发生更改时，请重新构建或重新运行依赖于它们的所有内容”。

在下面的示例中，单击按钮后 personRef 和 personReactive 都会修改 name 属性，随后便会在 UI 上得到响应，但对普通 JS 对象 person 来说就不会。

<template>
  {{ person.name }} 
  {{ personRef.name }} 
  {{ personReactive.name }} 
  <button @click="changeName('Amy')">Change Namebutton>
template>
 
<script setup lang="ts">
  import { ref, reactive } from 'vue'
 
  const person = { name: 'John' }
  const personRef = ref({ name: 'John' })
  const personReactive = reactive({ name: 'John' })
 
  const changeName = (name: string) => {
    person.name = name
    personRef.value.name = name
    personReactive.name = name
  }
script>

基本上，它们用于让组件具有响应性（对变化做出反应）。

不同之处

ref() 与 reactive() 主要有三个区别：

• ref() 函数可以接受原始类型（最常见的是布尔值、字符串和数字）以及对象作为参数，而 reactive() 函数只能接受对象作为参数。

// 无效 const x = reactive(true)
 // 有效 const x = ref(true)

对于对象，这两种语法都是有效的：

// 有效 const x = reactive({ name: 'John'}) 
// 有效 const x = ref({ name: 'John'})

• ref() 有一个 .value 属性，你必须使用 .value 属性获取内容，但是使用 reactive() 的话可以直接访问：

// 有效 const x = reactive({ name: 'John'}) x.name = 'Amy' // x => { name: 'Ammy' } 
// 有效 const x = ref({ name: 'John'}) x.value.name = 'Amy' // x.value => { name: 'Ammy' }

注意：refs 传递到模板（