vue watch侦听器

最新推荐文章于 2024-09-03 14:06:45 发布

Jason–json

最新推荐文章于 2024-09-03 14:06:45 发布

阅读量262

点赞数

分类专栏： vue 文章标签： vue vue watch html5 javascript es6

本文链接：https://blog.csdn.net/weixin_46146313/article/details/105748521

版权

vue 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

本文详细解析了Vue.js中Watch与Computed特性的区别与应用场景，强调了Watch适用于处理异步或开销大的数据变化，而Computed则擅长处理多数据影响单一数据的场景。同时介绍了Watch的三种使用方法，包括普通监听、深度监听和多层监听。

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

watch

watch 计算属性/计算数据/异步派出数据
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的,
computed和watch的区别

computed是依赖数据变化，才去计算，没法处理异步的变化
watch回去主动处理数据变化，可以直接处理异步
watch适合处理，一个数据影响多个数据，更适合处理数据相互独立的场景
computed: 适合处理多个数据影响一个数据，数据相互不独立的场景，也可以(get，set)
watch 三种使用方法

        let app = new Vue({
            el:"#app",
            data:{   
                users, //多层的数组数据
                showUsers:users, 
                gender:"",
                checkAll:false,
            },

方法1
watch做监听某一个数据发生改变时，触发响应的功能，想监听谁就直接写，默认监听一层数据，第二层发生改变，监听不了。

watch: {// 想监听谁就直接写，默认监听一层数据               
     checkAll(){ //watch做监听 数据发生改变触发checkAll方法 
         this.users.forEach(user=>{ // 当checkAll发生改变时 遍历数组没一个值都为true
            user.checked = this.checkAll;
         })
     },

     users(){ //这里的数据是多层的，处理不了 (){}users数据发生改变触发的回调函数
           console.log(2)  //判断之前随意输出这里不触发
           if(this.users.every(user=>user.checked)){//如果数组中的每一个checked都为真
                  this.checkAll = false;
           }else{
                 this.checkAll = true;
           }
      }
}

第二种方法深度监听
深度监听handler方法和deep属性结合，可以监听多层

users:{ //users 属性名 要监听的数据 属性值是对象 { } 里面包括着固定的方法handler
       handler(newVal,oldVal){ //handler固定方法， 当users数据发生改变触发的方法
       console.log("新的值"+newVal)
       console.log("旧的值"+oldVal)
       if(this.users.every(user=>user.checked)){
            this.checkAll = true;
       }else{
            this.checkAll = false;
       }
	},
       deep:true  // 默认是false 只监听一层 true开启深度监听
}

第三种 3.多层监听

        watch: {
            'a.b.c': function() {
                //...
            }
        }