在 Vue 开发中，最容易出问题的地方往往是对 Vue 响应式系统的误解。
响应式的核心不在于“数据一变，页面就刷新”，这是表象。真正的本质是数据和函数的关联。
当数据与函数关联后，数据的变化会触发相应函数的重新运行。这里要明确两个关键点：哪些数据和哪些函数关联了呢？
哪些数据会被关联？
1、函数中使用的数据：只有当函数用到了某个数据时，这个数据才与函数关联。例如，读取对象中的某个属性。
2、读取或使用的数据是响应式数据：只有 ref 或 reactive 包裹的数据才具备响应式特性，普通数据是不会触发关联函数运行的。
哪些函数会被监控？
被监控的函数，在 vue2 是放在 Wacther 内部的，在 vue3 是放在 effect 内部的。
1、render：渲染函数，也就解释了为什么数据一变，页面刷新，因为 render 是被监控的。
2、watchEffect：自动依赖追踪，数据变化时，函数会自动重新执行。
3、watch：显式地监听指定的数据变化，并执行相应回调。
4、computed：计算属性，它是基于响应式数据计算得来的，数据变化会重新计算值。
因此，只要满足这两点：响应式数据和被监控的函数，数据变化时，函数就会重新运行，页面表现才会随之更新。
举个 🌰 1
<template><div class="container"><p>count：{{ count }}</p><p>double：{{ doubleCount }}</p><button @click="count++" class="btn">increase</button></div>
</template><script setup>
import { ref } from 'vue'
const count = ref(0)
const doubleCount = ref(count.value * 2)
</script>
解释：
1、render 函数关联了 count 和 doubleCount 数据，count 是响应式数据，因此，count 变化，页面刷新。
2、为什么 doubleCount 没有变化？doubleCount 只是和 count 进行关联，但是响应式本质没有数据与数据的关联，是数据和函数的关联。因此 doubleCount 不会改变。
🌰 2
javascript">import { ref, watchEffect } from 'vue'
const count = ref(0)
const doubleCount = ref(0)
watchEffect(() => {doubleCount.value = count.value * 2
})
解释：
1、现在被监控的函数有两个，render 和 watchEffect，在 watchEffect 中使用了 count，并且 count 是响应式数据，也就是说，render 函数关联两个数据，wacthEffect 关联一个数据。
2、当点击按钮改变 count 时，两个函数都会运行，wacthEffect 运行时，doubleCount 重新赋值，重新展示。
🌰 3
javascript">import { ref, watchEffect } from 'vue'
const count = ref(0)
const useDouble = (count) => {const doubleCount = ref(count)watchEffect(() => {doubleCount.value = count * 2})return doubleCount
}
const doubleCount = useDouble(count.value)
解释：
1、为什么 doubleCount 没有变化？因为 useDouble 函数并没有被监控，只是一个普通的函数。
2、在 useDouble 函数中，有被监控的 wacthEffect 函数，但是函数内部没有读取某个属性，读取的 count 不是响应式数据，而是一个原始数据。
因此，count 变化后，render 运行，但是 watchEffect 不会执行。
🌰 4
javascript">import { computed, ref } from 'vue'
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
解释：
computed 被监控的函数关联了响应式数据 count，因此 count 变化后，render 函数和 computed 函数都会重新运行。
🌰 5
javascript">import { computed, ref } from 'vue'
const count = ref(0)
const useDouble = (count) => {const doubleCount = computed(() => count * 2)return doubleCount
}
const doubleCount = useDouble(count.value)
解释：
useDouble 是普通函数，没有被监控，内部被监控的 computed 没有关联响应式数据，也没有读取某个对象的某个属性。因此 count 变化时，computed 函数不会重新运行。
🌰 6
javascript">import { computed, ref } from 'vue'
const count = ref(0)
const useDouble = (count) => {const doubleCount = computed(() => count.value * 2)return doubleCount
}
const doubleCount = useDouble(count)
解释：
为什么这种写法可以改变 doubleCount 呢？因为 computed 函数读取了对象的属性，也就是我们传递的是响应式对象，而不是一个普通数据。实现了数据和函数直接的关联。
以上就是 Vue 响应式原理的本质，当我们遇到某些疑惑不能解决时，不妨分析一下其根源。
