【Vue】侦听属性watch

业务场景

1.一个属性影响多个属性

2.监听路由

immediate、deep

   data() {
    return {
      firstName: "刘",
      lastName: "XX",
      fullName: "",
      obj: {
        a: 1
      }
    };
  },
  watch: {
    // 最简单的监听列子
    firstName(newValue, oldValue) {
      this.fullName = this.firstName + this.lastName;
    },
    // handler、immediate。immediate:true代表即在最初绑定data的时候就执行监听
    firstName: {
      handler(newValue, oldValue) {
        this.fullName = this.firstName + this.lastName;
      },
      immediate: true
    },
    // deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler
    obj: {
      handler(newValue, oldValue) {
        console.log("obj.a changed");
      },
      immediate: true,
      deep: true
    },
    // 优化
    "obj.a": {
      handler(newValue, oldValue) {
        console.log("obj.a changed");
      },
      immediate: true
    }
  },

注销watch

不注销会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的，他会随着组件的销毁而销毁。

监听路由

  watch: {
    $route (to, from) {
      // to表示去往的页面 from表示来自哪个页面
    }
  },

参考文献

https://www.cnblogs.com/yesu/p/9546458.html