VUE---watch监听器

作用：监视数据变化，执行一些 业务逻辑 或 异步操作。

语法：

① 简单写法 → 简单类型数据，直接监视

watch : {

        // 该方法会在数据变化时，触发执行

         数据属性名 (变化后的值, 变化前的值) {

                 一些业务逻辑 或 异步操作

        },

         '对象.属性名' (变化后的值, 变化前的值) {

                 一些业务逻辑 或 异步操作

        }

}

示例如下：

data: {
    words: '',
    objInfo: {
        name: ''
    }
},
watch: {
    words(newVal, oldVal) {
        console.log(newVal, oldVal)
    },
    'objInfo.name'(newVal, oldVal) {
        console.log(newVal, oldVal)
    }
}

② 完整写法 → 添加额外配置项

(1) deep: true 对复杂类型深度监视，当对象的任一属性改变后，都可以侦听到

(2) immediate: true 立即侦听 ， 页面刷新立刻执行一次handler方法

watch: {// watch 完整写法

         数据属性名: {

                immediate : true , // 立即侦听

                 deep : true , // 深度监视

                 handler ( newValue, oldeValue ) {

                         console .log ( newValue, oldeValue )

                }

        }

}

示例如下：

data: {
    obj: {
        name: ''
    }
},
watch: {
    obj: {
        handler(newVal, oldVal) {
            console.log(newVal, oldVal)
        },
        deep: true,
        immediate: true
    }
}

非对象模式也可以使用语法2的形式书写