javascript - 观察简单数组的元素

Question

Vue 看不到简单数组项的变化。

我正在学习 Vue.js，并且在观察程序方面遇到问题。也就是说，我试图观察数组中的变化，并更改一个数据值。每次我添加新项目并更改或删除现有项目时，我都想更改该值。

data() {
    return {
        change: false,
        array: ['one','two','three','four']
    }
},
watch:{
    array:{
        deep:true,
        handler(){
            this.change = true;
        }
    }
}

Vue 仅查看数组长度何时更改，而不是特定元素。

Answer 1

您可以观察对象中的嵌套值，如docs所示使用点状字符串表示法。

var vm = new Vue({
  data: {
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})

据我所知，您不能对数组(即array[0])执行此操作，因为引用会发生变化或被删除。我认为做你想做的事情的最好方法是在观察者 handler 中比较 newValue 和 oldValue如果整个数组发生变化，则函数。

// from vuejs docs
watch: {
  // whenever question changes, this function will run
  question: function (newQuestion, oldQuestion) {
    this.answer = 'Waiting for you to stop typing...'
    this.debouncedGetAnswer()
  }
},