VUE---watch监听器

发布时间：2024年01月12日
作用：监视数据变化，执行一些 业务逻辑 或 异步操作。
语法：
① 简单写法 → 简单类型数据，直接监视
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的形式书写?

文章来源:https://blog.csdn.net/sinat_34896766/article/details/135546188
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章