在 Vue.js 中，响应式（Reactivity）是指数据模型（通常是 Vue 实例中的 data 属性）与视图（HTML 模板）之间的双向绑定机制。当数据模型中的数据发生变化时，视图会自动更新以反映最新的数据状态；今天就让我们来学习一下 Vue 中响应式的核心API。

响应式

reactive

在 Vue 之中，reactive 用于创建一个响应式的复杂对象。它直接接受一个普通 JavaScript 对象作为参数，并返回一个响应式的版本。reactive 适用于创建对象或数组的响应式引用，而不能直接把原始类型转化为响应式变量。

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

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

const state = reactive({ count: 0 })
</script>

<style lang="scss" scoped>

</style>

reactive 的响应式转换是“深层”的：它会影响到所有嵌套的属性。如果原始对象包含嵌套的对象或数组，那么这些嵌套的属性也将是响应式的。若要避免深层响应式转换，只想保留对这个对象顶层次访问的响应性，我们可以使用 shallowReactive 作为替代。

ref

在 Vue 中，我们还可以用 ref来创建响应式引用；ref 通常用于创建基本数据类型的响应式引用，比如字符串、数字、布尔值等。ref 还会返回一个具有 .value 属性的对象，这个对象可以用于跟踪数据的变化。

const count = ref(0)
console.log(count.value) // 0

count.value = 1
console.log(count.value) // 1

我们通过 .value 方法去访问响应式对象里面的值。

watch

在 Vue.js 中，watch 是一个非常有用的特性，用于观察数据模型中的某个属性的变化，并在该属性发生变化时执行相应的回调函数。watch 可以帮助你监听数据的变化，并在变化发生时执行特定的操作。

其中 watch 接收三个参数；

1. 第一个参数是侦听器的源
2. 第二个参数是在发生变化时要调用的回调函数
3. 第三个可选的参数是一个对象，支持以下这些选项：

• immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
• deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。
• flush：调整回调函数的刷新时机。
• onTrack / onTrigger：调试侦听器的依赖。
• once：回调函数只会运行一次。侦听器将在回调函数首次运行后自动停止。

<template>
    <h2>{{temp}}</h2>
    <h5>{{suggest}}</h5>
    <button @click="add">+1</button>
    <button @click="minus">-1</button>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
let temp = ref(10)
let suggest = ref('夹克')

const add = () => {
    temp.value += 5
}

const minus = () => {
    temp.value -=5
}

watch(temp, (newVal, oldVal)=>{
    console.log(newVal, oldVal);
    if (newVal >= 30) {
        suggest.value = '短袖'
    }else if (newVal >= 20){
        suggest.value = '夹克'
    }else if (newVal >= 10) {
        suggest.value = '棉袄'
    }else {
        suggest.value = '羽绒服'
    }
}, {immediate: true})
</script>

在上面的代码中，我们就对 temp 进行了 watch 监听；当 temp 的值发生变化时，则执行回调函数，对 temp 进行判断给出相应的 suggest ；但 watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数；如果我们要对temp的默认值进行判断的话，我们就要默认执行一次watch的回调函数，这时我们就可以设置第三个变量{immediate: true}，让侦听器创建时立即触发回调。

computed

在 Vue.js 中，computed 用于创建计算属性。计算属性是基于其他数据属性的值进行计算得出的新属性，并且具有缓存功能。这意味着当依赖的数据属性变化时，计算属性才会重新计算，否则它会使用缓存的结果。

<template>
    <h2>{{temp}}</h2>
    <h5>{{suggest}}</h5>
    <button @click="add">+1</button>
    <button @click="minus">-1</button>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
let temp = ref(10)
// let suggest = ref('夹克')

const add = () => {
    temp.value += 5
}

const minus = () => {
    temp.value -=5
}

const suggest = computed(()=> {
    if (temp.value >= 30) {
        return '短袖'
    }else if (temp.value >= 20){
        return '夹克'
    }else if (temp.value >= 10) {
        return '棉袄'
    }else {
        return '羽绒服'
    } 
})

</script>

与 watch 不同的是，当一个计算属性首次被访问时，computed 会主动执行其计算逻辑并缓存结果，当没有其依赖的数据属性发生变化，计算属性将直接返回缓存的结果，一旦依赖的数据属性发生变化，计算属性也需要更新其值以反映最新的数据状态。

在大多数应用场景中，用 watch 能实现的，我们用计算属性 computed 也能够实现；上述功能实现效果如下图：

小结

在 Vue 中，我们有两种方式去声明响应式变量，ref用于创建基本数据类型的响应式引用；而 reactive 是创建复杂数据类型的响应式引用 ，如对象，数组等；computed 和 watch 则都是可以用来监听并进行页面的动态更新；watch 是懒监听，默认不会主动执行一次回调函数；而计算属性computed第一次会执行回调，并将值进行缓存；每当回调中任意变量值变更时，computed都会重新执行回调函数，动态地更新页面。