vue.js - Vue 3 - 更新 shallowReactive 数组的官方方式

Question

例如，我有以下数组:

setup() {
   let array = shallowReactive([]);
   return {
      array
   };
}

浅 react 的使用很重要，因为这个数组可能不包含 react 对象，而 react 对象本身可能有反应场。我需要过滤它的元素。以下代码不起作用，因为它创建了一个新对象，该对象与模板中使用的 array 没有共同之处:

array = array.filter(obj => !obj.empty)

我唯一知道的保持 react 性的方法是:

array.splice(0, array.length, ...array.filter(obj => !obj.empty))

但它看起来很丑，而且可能没有效果。有没有其他方法可以保持 react 性？

Answer 1

也许这对你有帮助？

import { ref, computed } from "vue"

setup() {
   const shallowReactive = ref([{obj:'1'}, {obj:'2'}, {}])
   const array = computed( () =>  shallowReactive.value.filter(obj => obj.obj))
   console.log(array.value)

   return {
      array
   };
}