Vue 3 - 更新 shallowReactive 数组的官方方法答案

【问题标题】：Vue 3 - The official way to update shallowReactive arrayVue 3 - 更新 shallowReactive 数组的官方方法
【发布时间】：2021-05-23 05:14:00
【问题描述】：

例如，我有以下数组：

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

使用浅反应很重要，因为这个数组可以包含非反应对象，而这些对象本身可以具有反应字段。我需要过滤它的元素。以下代码不起作用，因为它创建了一个新对象，与模板中使用的 array 没有共同点：

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

我唯一知道的保持反应性的方法是：

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

但它看起来很丑，可能没有效果。还有其他保持反应性的方法吗？

【问题讨论】：

标签： vue.js vuejs3 vue-reactivity

【解决方案1】：

我认为Object.assign 会保持其反应性，同时更清洁。

演示：https://codepen.io/jacobgoh101/pen/RwoZOGr

在你的情况下，


  setup() {
    const array = shallowReactive([]);

    const mutate = () => {
        const newArray = array.filter(obj => !obj.empty);
        Object.assign(array, newArray);
    };

    return {
      array,
      mutate
    };
  }

【讨论】：

【解决方案2】：

如果你想改变数组的内容，使用 splice 是最干净的方法。（相对于 push、shift 等）。

通常使用计算来获得数组的副本，该副本将具有该数组的过滤副本，但这可能不是您想要的。

另一种选择是使用ref 或shallowRef 而不是shallowReactive

不幸的是，AFAIK，无法从外部更改 shallowReactive 创建的代理的目标。

【讨论】：

【解决方案3】：

也许这会对你有所帮助？

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
   };
}

【讨论】：

我需要更改array，可能是过滤、排序等。