Vue3中ref内嵌套的响应式值无法更新问题求助

为啥原来的写法不生效？ #

你初始化items的时候，body里的${order_price.value}是一次性计算的静态值——只有在setup第一次执行时会取当时order_price的数值，之后order_price变化时，这个字符串不会自动重新生成，因为它没有和order_price建立响应式依赖关系。用watch手动更新确实是权宜之计，属于手动维护响应式，不仅代码冗余，还容易漏处理边界情况。

优化方案（按推荐程度排序） #

方案1：用computed生成items（最推荐，纯依赖状态场景）

如果items的内容完全依赖于store里的order_price，不需要手动修改items的内容，直接把items改成computed。Vue会自动跟踪依赖，当order_price变化时自动更新整个数组：

import { storeToRefs } from 'pinia'
import { useLocationStore } from '~/store'
import { computed } from 'vue'

export default {
  setup() {
    const store = useLocationStore()
    const { order_price } = storeToRefs(store)

    // 用computed替代ref，自动响应order_price的变化
    const items = computed(() => [
      {
        id: 1,
        title: 'Foo',
        body: `<p>Bar — ${order_price.value} $</p>`,
      },
    ])

    return {
      store,
      items,
    }
  },
}

这种写法完全符合Vue响应式的设计理念，不需要手动维护监听逻辑，依赖关系清晰。

方案2：用watchEffect简化监听（适合需要手动修改items的场景）

如果items需要在其他地方手动修改内容（比如添加/删除条目），没办法用computed，可以用watchEffect代替watch，它会自动收集回调里用到的响应式变量，写法更简洁：

import { storeToRefs } from 'pinia'
import { useLocationStore } from '~/store'
import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const store = useLocationStore()
    const { order_price } = storeToRefs(store)

    const items = ref([
      {
        id: 1,
        title: 'Foo',
        body: `<p>Bar — ${order_price.value} $</p>`,
      },
    ])

    // watchEffect自动跟踪order_price，变化时自动更新body
    watchEffect(() => {
      items.value[0].body = `<p>Bar — ${order_price.value} $</p>`
    })

    return {
      store,
      items,
    }
  },
}

相比原来的watch，不需要手动指定监听源，代码更简洁，也不容易出错。

方案3：把渲染逻辑移到模板（最简洁，适合仅渲染场景）

如果body的内容只是用来在模板里展示，完全可以把拼接逻辑放到模板中，让Vue自动处理响应式，不需要在setup里折腾：

<template>
  <div v-for="item in items" :key="item.id">
    <h3>{{ item.title }}</h3>
    <!-- 直接在模板里渲染动态内容 -->
    <p v-html="`<p>Bar — ${order_price} $</p>`"></p>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useLocationStore } from '~/store'
import { ref } from 'vue'

const store = useLocationStore()
const { order_price } = storeToRefs(store)

const items = ref([
  {
    id: 1,
    title: 'Foo',
  },
])
</script>

这种方式把数据和渲染逻辑分离，完全不需要任何监听代码，是最简洁的写法。

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