vue-watch监听的方法

Posted 2021-06-24 简单笔记

在vue中，很多时候需要实时了解数据的变化执行相应的操作，通过watch监听能实现相应需求。

<div>
      <p>inputOne: <input type="text" v-model="value1"></p>
      <p>inputTwo: <input type="text" v-model="valueObj.value2"></p>
</div> 

　　

1、注册watch

export default {
    name: \'demo\',
    watch: {
　　　　value1(newVlue, oldValue) {
　　　　　　this.value = newValue + \'bbb\'
　　　　　　console.log(this.value）
　　　　}
　　},
    data() {
      return {
　　　　　　value: \'aaa\',
          value1：\'\',
          valueObj: {
             value2: \'\',
          }
      }
    }        
} 

　　在inputOne输入123后，监听到value1的改变，打印出value的值：123bbb

 

2、handler方法

 watch中需要具体执行的方法，监听数组或对象的属性时用到的方法

 

watch: {
　　　　value1：{
                handler（newVal，oldVal）{
                    this.value = newVal + \'ccc\'
                },
                immediate:true
           }
    },    

　　

3、immediate属性

 

　　在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调，默认为false

 

 4、deep属性

 

　　监听对象或对象中的属性，需要使用deep，即深度监听。

　　在对象中层层遍历，并在监听对象上的每一个属性上都添加监听，当然这样也会损耗性能

watch: {
　　　　valueObj：{
                handler（newVal，oldVal）{
                    this.value = newVal + ddd\'
                },
                deep:true
           }
    },  
 
或者：直接监听属性，避免给所有属性监听而损耗性能。
　　watch: {
　　　　\'valueObj.value2\'：{
                handler（newVal，oldVal）{
                    this.value = newVal + \'eee\'
                },
　　　　　　　　　　　immediate: true,　
                  deep:true
           }
    }, 

　　

5、watch监听路由

watch: {
    \'$route\'(to,from){
      console.log(to);   //to表示去往的界面
      console.log(from); //from表示来自于哪个界面
      if(to.path=="/home"){
        console.log("路由跳转home");
      }
    }
  },