附加到 watch 的代码：{} 永远不会执行，尽管 watched 变量确实发生了变化

Question

我似乎无法观察我的变量 form.ac_all，我知道它确实会随着时间而改变：

data () {
    return {
        form: {
            ac_all: false
        }
    } 
},
watch: {
    form: {
        ac_all () {
        console.log(form.ac_all)
        }
    }
}

由于变量是嵌套的，我尝试使用 deep 选项以防万一，但无济于事：

data () {
    return {
        form: {
            ac_all: false
        }
    } 
},
watch: {
    form: {
        ac_all: {
            handler () {
                console.log(form.ac_all)
            },
            deep: true
        }
    }
}

知道为什么它不起作用吗？

Answer 1

你必须这样做：

new Vue({
  el: '#app',
  data() {
    return {
        form: {
            ac_all: false
        }
    }
  },
  watch: {
    'form.ac_all'() {
        console.log('form.ac_all value is ' + this.form.ac_all)
    }
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="form.ac_all = !form.ac_all">Toggle</button>
</div>

附加到 watch 的代码：{} 永远不会执行，尽管 watched 变量确实发生了变化

Code attached to watch: {} never executes although the watched variable does indeed change

watch

vue.js