watch的immediate和deep

2019-04-03  本文已影响0人  理想休想幻想

基本类型包括Number、String、Boolean、Null、Undefined
引用类型为Object type,如Object、Array、Function、Data
场景:对基本类型和引用类型的监听,以及immediate与deep的区别使用
废话:在入坑vue后对watch的使用不怎么熟练,经常不知道怎么使用,在入坑前端几年后,先对watch做个区别,仅限个人经验总结,欢迎指点。
immediate:初始绑定加载时就进行监听
deep:一般使用于对引用类型的监听,深度监听,如监听一个Object,只要Object里面的任何一个字段发生变化都会被监听,但是比较消耗性能,根据需求使用,能不用则不用。

监听路由(引用类型)

export default {
  name: 'App',
  data() {
    return {
          name: 'xxx',
          obj: {
              a: 1
          }
    }
  },
  watch: {
     /* 1 监听基本类型变化,初始加载不会被立即监听*/
     name() {
        console.log(this.name)
     }
     /*2 监听基本类型变化  初始加载时就进行监听*/
     name: {
          handler(newV) {
              // do something
          },
          immediate: true
      }

    /*3 深度监听引用类型  obj中任何一个数据发生改变都会被监听*/
    obj: {
      handler(newV) {
          //do something
      },
       deep: true  // 深度监听
    }
  /* 4 深度监听引用类型中某个属性*/
  'obj.a': {
      handler(newV) {
         // do something
      },
      deep: true, // 深度监听
      immediate: true // 初始绑定时就立即监听
  }
    /** 5 监听引用类型的某个类型。监听当前路由的name(路由配置中路由需配置一个name)
     */
    '$route.name': {
      immediate: true,
      handler(newV, oldV) {
         // do something
        )
      }
    }
  }
}
上一篇下一篇

猜你喜欢

热点阅读