VUE---watch监听器

最新推荐文章于 2024-11-13 11:52:56 发布

煸橙干儿~~

最新推荐文章于 2024-11-13 11:52:56 发布

阅读量489

点赞数 8

分类专栏： VUE基础文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/sinat_34896766/article/details/135546188

版权

VUE基础专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中watch功能的两种使用方式，包括简单写法和完整写法，重点讲解了如何通过deep和immediate选项实现数据的深度监视和立即执行业务逻辑。

摘要由CSDN通过智能技术生成

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

语法：

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

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的形式书写