vue的watch监听

最新推荐文章于 2024-09-08 17:48:01 发布

jokren

最新推荐文章于 2024-09-08 17:48:01 发布

阅读量364

点赞数

分类专栏： vue 文章标签： vue watch

本文链接：https://blog.csdn.net/jokren/article/details/92200920

版权

vue 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

一，watch和computed区别（各自处理的数据关系场景不同）

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

二，
（1）watch最简单的监听

 <input type="text" v-model="input">
 watch: {
        input(val) {
            //
        },
}

（2）handler处理器及immediate即时处理

//  例如父传子时，当子组件第一次接受值时的监听
props:['title']
watch:{
        title: {
            handler(newVal, oldVal) {
                debugger
            },
            immediate: true,
        },
}

(3)监听对象时 deep 深度监听
有以下几种方式

 data() {
        return {
            data: {
                id: 1,
                name: 'sds'
            }
        }
    },

 watch: {
        /***
         * watch  监听对象的几种方法
         * immediate：即时  第一次接受值时也监听到
         * deep： 深度监听
         */
        'data.name': {
            handler(newVal, oldVal) {
                debugger
            },
            // immediate: true,
            deep: true
        },
        'data.id': {
            handler(newVal, oldVal) {
                debugger
            },
            // immediate: true,
            deep: true
        },
         data: {
            handler(newVal, oldVal) {
                debugger
            },
            // immediate: true,
            deep: true
        },
    },