无法使用 vuejs 更新整个反应数组答案

【问题标题】：Can't update entire reactive array with vuejs无法使用 vuejs 更新整个反应数组
【发布时间】：2022-12-05 22:13:04
【问题描述】：

这是代码。没有错误或任何错误，但输出没有按预期更新。

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

const arr = reactive([2,4,6])

setTimeout(()=> { arr.value = [1, 3, 5, 7] }, 500) // This doesn't work!
</script>

<template>
  <h2 v-for="v in arr"> val {{ v }}</h2>
</template>

【问题讨论】：

标签： vue.js vuejs3 vue-composition-api vue-sfc

【解决方案1】：

setTimeout 就其上下文而言可能非常棘手，reactive 也有其怪癖。
因此我建议使用以下

<script setup>
import { useTimeoutFn } from "@vueuse/core";
import { ref } from "vue";

let arr = ref([2, 4, 6]);

const { start } = useTimeoutFn(() => {
  arr.value = [1, 3, 5, 7];
}, 500)
start()
</script>

<template>
  <h2 v-for="v in arr" :key="v">val {{ v }}</h2>
</template>

useTimeoutFn 是由 Vue 团队维护的官方助手“钩子”。
VueUse 项目有很多像这样超级有用的功能，试试吧！

【讨论】：

【解决方案2】：

如果你使用reactive，你会得到一个对象，你可以在没有value的情况下设置它的属性。您可以定义一个对象，其中 arr 是一个属性：

const state = reactive({
  arr: [2, 4, 6]
})
setTimeout(()=> {state.arr = [1,3,5,7]}, 500)

或者对于数组，我建议改用 ref，那么您的其余代码应该可以工作：

const arr = ref([2, 4, 6])

【讨论】：

reactive 出于某种原因不会更新 v-for 中的迭代，即使状态已正确更新。
您可能还需要将 :key 添加到 h2
没有任何改变。我想关于代理的通知可能有所不同。