Vue3中绑定class的ref关联函数为何随ref值变化触发更新？

先看你的代码：

<template>
  <h1 :class="{ disabled: aClass() }">Hello</h1>
</template>

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

const a = ref(1);

function aClass() {
  if (a.value === 2) {
    return true;
  }
  return false;
}

setTimeout(()=>{
   a.value = 2;
}, 3000)

setTimeout(()=>{
   a.value = 1;
}, 6000)

</script>

<style>
.disabled {
  background: red;
  color: blueviolet;
}
</style>

原因很直白：

• Vue的响应式系统会追踪模板里用到的响应式依赖。你的aClass()函数内部读取了a.value，所以a这个ref会被标记为该模板表达式的依赖。
• 3秒后a.value改成2时，响应式系统检测到依赖变化，触发组件重新渲染。重新渲染时，模板里的aClass()会被再次调用，返回true，h1加上disabled类，背景变红。
• 6秒后a.value改回1，依赖再次变化，组件再次重新渲染，aClass()被调用返回false，disabled类被移除，背景恢复原样。

总结：只要响应式依赖发生变化，组件就会重新渲染，模板里的函数就会重新执行一次，用来更新对应的视图状态。

内容的提问来源于stack exchange，提问作者Luzz