526互联

Vue watch 的handler,immediate,deep属性

发布时间 2023-05-09 11:31:44作者: pwindy
new Vue({
  el: '#app',
  data: {
    num: 0,
    sum:10,
  },
  watch: {
    // 只要num的值发生变化，sum的值就会变化  不用handler的简洁写法
    num(newValue, oldValue) {
      this.sum= newValue;
    }
    // 也可以使用handler方法写
    num:{
        handler(newValue, oldValue) {
            this.sum = newValue;
        }
    }
  } 
})

1.handler方法和immediate/deep属性

1.1.immediate属性

watch的特点就是，刚挂载的时候是不执行的，只有挂载完成后的变化才会执行。如果我们想要初次挂载的时候就执行，就需要用上immediate属性(immediate：true)

new Vue({
  el: '#app',
  data: {
    num: 0,
    sum:10,
  },
  watch: {
    // 只要num的值发生变化，sum的值就会变化
    num：{
        handler(newName, oldName) {
          this.sum= newName;
        },
        immediate: true,
    }
  } 
})

1.2.handler方法

这里可以看出添加了一个handler方法，其实watch的语法中是一直有这个handler方法的，只是没有添加immediate和deep属性的时候可以省略。

也可以把方法提炼到methods里面去

new Vue({
  el: '#app',
  data: {
    num: 0,
    sum:10,
  },
  watch: {
    // 只要num的值发生变化，sum的值就会变化
    num：{
        handler: function (newName, oldName) {
          this.sum= newName;
        },
        immediate: true,
    }
  } 
})
new Vue({
  el: '#app',
  data: {
    num: 0,
    sum:10,
  },
  methods:{
    numfun (newName, oldName) {
       this.sum= newName;
    }
  },
  watch: {
    // 只要num的值发生变化，sum的值就会变化
    num：{
        handler: 'numfun',//这里引用的是methods里面定义的方法名
        immediate: true,
    }
  } 
})

当watcher监听到变化的时候，可以同时调用多个方法

new Vue({
  el: '#app',
  data: {
    msg: {
       name: 'aaa',
       age: 12
    },
    num: 0,
    sum: 10
  },
  methods:{
    numfun (newName, oldName) {
       this.sum= newName;
    },
   logLine () {
      console.log('----logLine ---')
   },
   logContent () {
      console.log('----logContent ---')
   }
  },
  watch: {
    // 只要num的值发生变化，sum的值就会变化
    msg：{
        handler: 'numfun',//这里引用的是methods里面定义的方法名
        immediate: true,
    },
   'msg.name': [ 'logLine ' , 'logContent ' ]//数组的方式可以调用多个方法
  } 
})

1.3.deep属性

当我们想监听一个对象中的某个属性的时候，比方说上面msg对象中的name属性。由于Vue会在初始化实例时对属性执行getter/setter转化过程，所以属性必须在data对象上存在才能让Vue转换它，这样才能让它是响应的。

默认情况下，handler只会监听对象的引用变化，我们只有给对象重新赋值的时候，它才会监听到。

那如何才能想听到对象的具体的一个属性了？这就是deep的作用。

new Vue({
  el: '#app',
  data: {
    num: 0,
    sum: 10,
    msg:{
        name:'aaa',
        age: 12
    }
  },
  watch: {
    // 只要num的值发生变化，sum的值就会变化
    num：{
        handler(newName, oldName) {
          this.sum= newName;
        },
        immediate: true,
    },
    msg:{
        handler(newValue){
            console.log('msg的name发生了变化')
        },
        deep: true, // 默认是false
    }
  } 
})

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象(msg)的所有属性都加上这个监听器，但是这样性能开销会非常大，任何修改对象里面的任何一个属性都会触发这个监听器里面的handler。

2.字符串形式的监听

如果我们只想监听对象(msg)的某个具体的属性的变化，不监听对象(msg)的其他属性，可以使用字符串形式的监听。

 

watch: {
    'msg.name':{
        handler(newValue){
            console.log('msg的name发生了变化')
        },
        immediate: true // 默认false
        //deep: true, // 默认是false
    }
}

这样Vue.js才会一层一层解析下去，知道遇到对象(msg)的属性(name)

3.watch监听路由器

watch: {
    '$route'(to,from){
      console.log(to);   //to表示去往的界面 变化后的路由
      console.log(from); //from表示来自于哪个界面  变化前的路由
    }
  }
 
 
// 或者直接监听路由的属性path
watch:{
      '$route.path':function(newVal,oldVal){
        //console.log(newVal+"---"+oldVal);
        if(newVal === '/login'){
          console.log('欢迎进入登录页面');
        } else if(newVal === '/register'){
          console.log('欢迎进入注册页面');
        }
      }
 }