深入观察不处理对象 Vue答案

【问题标题】：Deep watch in not working on object Vue深入观察不处理对象 Vue
【发布时间】：2019-01-08 12:37:57
【问题描述】：

我在一个数组上设置了一个观察器，并且我在它上面启用了深度观察，但是当数组更改时处理函数不会触发，应用程序是在数据中返回的对象中定义的。代码如下：

  watch: {
    applications: {
      handler: function(val, oldVal) {
        console.log('app changed');
      },
      deep: true,
    },
    page(newPage) {
      console.log('Newpage', newPage);
    },
  },

【问题讨论】：

显示数组是如何变化的。
例如，在挂载钩子中的异步调用之后，数组从 [] 变为 [[1, 2, 3]]。我知道是这种情况，因为我可以通过 Vue chrome devtool 看到数组已更改

标签： javascript oop vue.js

【解决方案1】：

Vue 无法检测到数组的某些更改，例如当您直接在索引中设置项目时：

例如arr[indexOfItem] = newValue

这里有一些检测数组变化的替代方法：

Vue.set(arr, indexOfItem, newValue)

或

arr.splice(indexOfItem, 1, newValue)

您可以更好地了解阵列变化检测here

【讨论】：

和Vue.delete(object, key) 而不是Vue.set(object, key, undefined)

【解决方案2】：

如果你用arr[ index ] = 'some value' 重置你的数组，Vue 不会跟踪这个变量。最好使用Vue array’s mutation method。这些方法用于跟踪 Vue 的数组变化检测。

它对我有用。

【讨论】：