vue中的watch用法_getotherquery-CSDN博客

本文链接：https://blog.csdn.net/tyw15/article/details/101351112

VUE官方文档：

Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

watch是一个对象，对象就有键，有值。

键是观察表达式，就是要监控的对象，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。

值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。
值也可以是函数名：不过这个函数名要用单引号来包裹。
第三种情况厉害了。
值是包括选项的对象：选项包括有三个。

第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

// vue 侦听器（当侦听对象的值发生改变时，执行处理器）
  watch: {
    // 键是对象
    // 值是函数
    passwordType: function(val, oldVal) {
      console.log("new: %s, old: %s", val, oldVal);
    },
    // 键是字符串表达式（字符串的形式监听对象属性，监听对象的某些属性，特定场景可代替deep做深度监控） 
    // 值是方法名
    'loginForm.password': 'doMethod',
    // 键是路由对象
    // 值是对象（含有handler，deep，immediate）三个选项
    $route: {
      //侦听表达式
      handler: function(route) {
        //处理器
        this.watchQRResult(window.location.href);
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true //初始化时是否执行
    }
  },