[vue]watch 的使用

vue 中 watch 监听

作用

主要用于监听值的变化

watch的使用

普通变量的监听

watch: {
    obj(new_value, old_value) {
        console.log(new_value, old_value)
    }
}

以上方式只会监听 obj 是否有值的变化,如果obj是个对象，含有属性,那么对象属性的值，如a的值发生了变化,不会触发watch

例如：

obj:{
    a:1
}

Object 监听–深度监听

watch: {

    obj:{
        handler(new_value,old_value){
            console.log(new_value,old_value)
        }
    },
    deep: true
}

添加deep属性,向下添加监听到每一个key,deep默认是false,这种可以监听a的变化,但是如果直接改变一个值无法触发watch,例如:

obj['a']=2

以上不会触发watch

如果需要改变内部值并且触发watch,需要用Vue.$set：

this.$set(tobj,'a',2)

如此,便可以触发watch

使用场景

父组件的值传递给子组件，如果传递的值为异步获取的值，那么子组件需要检测props值是否发生变更，以此用来更新子组件的初始化的值，此时需要用到watch