将观察对象添加到数组 - Vue答案

【问题标题】：Add watched object to array - Vue将观察对象添加到数组 - Vue
【发布时间】：2021-05-18 14:35:02
【问题描述】：

我正在使用 vue 应用程序。我面临的问题是我只想将更改/唯一的对象添加到新数组中。

它不断添加重复的对象。我确信这是我这边的某种愚蠢的错误，但我似乎找不到它。

<script>   
export default {
  data() {
    return {
      changedArray: [],
      originalArray: [
         {key1:val1},
         {key1:val2},
         {key1:val3}
      ]
    };
  },
  created() {
    this.originalArray.forEach((val) => {
      this.$watch(() => val, this.handleChange, { deep: true });
    });
  },
  methods: {
    handleChange(newVal) {
      if (this.changedArray.length > 0) {
        this.changedArray.forEach((o) => {
          if (o.key1 !== newVal.key1) {
            this.changedArray.push(newVal)
          }
      });
      } else {
        this.changedArray.push(newVal)
      }
    },
  }
};
</script>

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

VueJS 在像这样的数组中深度观察对象的反应性方面可能存在一些问题。

首先，考虑是否可以消除使用观察者的需要。在大多数情况下，观察一个对象是不必要的，可以通过改变程序的结构来避免。

这是首选，因为它降低了组件的复杂性并保持清晰。同样，对于 vue，观察者的计算可能很复杂，尤其是当它们很深时。

在您的示例中，您正在为数组的每个项目创建一个观察者。这可能会极大地损害您的表现

有什么方法可以重构，以便负责更新每个单独对象的方法也运行handleChange 比较？这样就不需要观察者了。

如果你必须使用这种方法，你需要通过创建一个包含观察者逻辑的子组件来分离你的逻辑。

这样，父组件中的v-for 不会循环遍历父组件中的每个对象并创建观察者，而是创建子组件的实例。

然后子组件只为自己创建一个观察者，并在更新时向父组件发出一个事件。

【讨论】：