vue3 watch侦听器

watch侦听器

语法:

  new Vue({
            el:'',
            data:{
                要监听的值:''
            },
            methods:{},
            wathch:{
                //参数一:改变后的值.
                //参数二:改变前的值.
                要监听的值(newValue,oldValue){
                    
                }
            }
        })

示例:

    
    
    
    


    

        修改msg
        
{{msg}}
    

    
    

特点

特点1: 所有的侦听器要定义在watch节点下

特点2:侦听器本质为函数，要监视哪个数据的变化就把数据名作为方法名即可

特点3:侦听器的参数，新值在前，旧值在后

侦听数组

数组是应用类型,存在比较复杂的侦听规则。
从理论上说,修改一个数组的内容,比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。为此, Vue.js对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。
特点1:Vue不能检测以下数组的变动

• 利用索引值直接设置一个数组时,例如:vm.items[indexOfItem] = newValueb.
• 直接修改数组的长度时,例如:vm.items. length = newLength

特点2:使用标准方法修改数组可以被侦听到
①push()尾部添加   ②pop()尾部删除   ③unshift()头部添加   ④shift(）头部删除
⑤splice()删除、添加、替换   ⑥sort()排序   ⑦reverse(）逆序
(Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。)

示例:

    

        

            

                {{item}}
            
        
        添加
        删除
        修改第一个项
        在第二个项添加
    
    
    

侦听对象

侦听对象指向的变化

        new Vue({
            el:'#app',
            data:{
                obj:{
                     name:'leo',
                     age:22,
                     sex:male
                }
            },
            watch:{
                obj(){
                      console.log('obj有变化');
                    }
                    
                }
            }
        })

侦听对象属性的变化

        new Vue({
            el:'#app',
            data:{
                obj:{
                     name:'leo',
                     age:22,
                     sex:male
                }
            },
            watch:{
               //记得加引号
                "obj.name"(){
                      console.log('obj有变化');
                    },
                    
                }
            }
        })

当对象变化时会调用函数/打开页面时自动调用函数/开启深度监听

        new Vue({
            el:'#app',
            data:{
                obj:{
                     name:'leo',
                     age:22,
                     sex:male
                }
            },
            watch:{
                obj(){
                      handler(){
                          console.log('obj有变化');
                    },

                    //开启深度监听
                    deep:true,

                    //是否开启打开页面时立即调用handler函数
                    immediate:true
                  }  
                }
            }
        })