在 Vue3 <script setup> + 组合式 API 之 怎用使用响应式变量

什么是响应式？

Vue3 的响应式是：当更改响应式对象的值改变时，视图会随即自动更新。

ref()

ref() 返回一个响应式对象，可以用 value 属性来访问或更改对象的值。
ref 对象在模板中会自动解包，用变量名不需要加 .value 就能访问。

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

const say = ref('hi'); // 定义值为 hi 的响应式变量 say
say.value = 'hello'; // 把 say 的值改为 hello
</script>

<template>
    <!-- 自动解包，不需要些成 {{ say.value }} -->
    <p>{{ say }}</p>
</template>

reactive()

用 reactive() 函数可以创建一个响应式对象，可以用对象的属性来访问对象，也可以使用 Object.assign() 来改变对象。

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })

Object.assign(state, {count: 9}); // 用 Object.assign 更改，使用时应注意，Object.assign 为覆盖式浅拷贝值。

function increment() {
  state.count++
}

</script>

<template>
  <button @click="increment">
    {{ state.count }}
  </button>
</template>

reactive() 仅对 对象类型 有效（对象、数组和 Map、Set 这样的集合类型），而对 string、number 和 boolean 这样的 原始类型 无效。

readonly()

readonly() 返回一个原值的只读代理对象。

响应式数据源的侦听

组合式 API 通过如下函数定义侦听响应式数据源，详见官方文档。

• watch() 侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。
• watchEffect() watch() 使用 immediate: true 选项时的别名，立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
• watchPostEffect() watchEffect() 使用 flush: 'post' 选项时的别名。
• watchSyncEffect() watchEffect() 使用 flush: 'sync' 选项时的别名。

ref()/reactive/非响应式变量该怎样选择？

响应式需要实时监听变量的状态，是需要系统开销的，所以不应该所有的变量都用响应式。
当页面因响应式变量变动而刷新时（包括隐藏、显示），很多时候非响应式变量值改动了也会跟着变，但并不是100%。
只要涉及到模板跟着实时更新的变量，都应该用响应式变量，反之则应该用飞响应式变量。

• 当变量改动后，模板视图不需要跟着变的时候，不需要用响应式变量。
• 当需要响应式，并且要覆盖全部的值来更改的时候，使用 ref，如列表数组、原始类型等。
• 当值为对象（对象、数组、Map、Set 等集合类型）类型的时候，用 reactive。

参考
1、响应式基础
2、深入响应式系统
3、响应式API：核心