Vue 3 函数返回的ref响应式值变更后模板不触发更新如何解决

问题核心根因：模板中的表达式会在每次组件重渲染时重复执行，你在parse函数中每次调用都创建了全新的ref对象，哪怕前一次生成的ref3秒后更新了值，模板重渲染时已经换成了新创建的ref，新ref的初始值依旧是initial value，自然看不到更新效果，也无法跟踪变更。

解决方案1：提前初始化响应式变量（推荐） #

不要在模板调用的函数中动态生成响应式变量，提前在setup阶段创建好所有需要的响应式变量，直接在模板中引用即可。

<template>
  {{ fooVal }}
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const fooVal = ref('initial value')

    setTimeout(() => {
      fooVal.value = 'changed value'
    }, 3000)

    return { fooVal }
  },
}
</script>

解决方案2：按参数缓存生成的ref #

如果确实需要根据动态参数生成对应的响应式变量，可以加一层缓存，同一个参数返回同一个ref实例，避免重复创建。

<template>
  {{ parse('foo') }}
</template>

<script>
import { ref, onUnmounted } from 'vue'

export default {
  setup() {
    const refCache = new Map()

    function parse(param) {
      // 已存在缓存直接返回，避免重复创建ref
      if (refCache.has(param)) {
        return refCache.get(param)
      }
      const target = ref('initial value')
      setTimeout(() => {
        target.value = 'changed value'
      }, 3000)
      refCache.set(param, target)
      return target
    }

    // 组件卸载时清空缓存，避免内存泄漏
    onUnmounted(() => {
      refCache.clear()
    })

    return { parse }
  },
}
</script>

内容的提问来源于stack exchange，提问作者Arūnas Smaliukas