vue 深度监听watch用法 deep immediate的区别

最新推荐文章于 2025-09-09 10:55:03 发布

原创最新推荐文章于 2025-09-09 10:55:03 发布 · 709 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨Vue.js中watch属性的immediate和deep选项，解释如何使用它们进行深度监听和立即执行，以及如何优化监听策略，避免不必要的性能开销。

vue 深度监听watch用法的
属性immediate和deep

// An highlighted block
watch: {
    baseData: {
      handler(newcal, oldval) {
        this.baseData = newcal;
      },
      deep: true
    },
    formItem: {
      handler(newval,oldval){
        this.txtVal = newval.entrustmatter.length;
        this.txtVal_1 = newval.entrustrequest.length;
      },
      deep:true
    }
  },

deep和immediate，默认值是 false
deep就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

优化，我们可以是使用字符串形式监听。

// An highlighted block
watch: {
    baseData: {
      handler(newcal, oldval) {
        this.baseData = newcal;
      },
       immediate: true
    },
    formItem: {
      handler(newval,oldval){
        this.txtVal = newval;    
      },
       immediate:true
    }
  },