vue watch的用法

vue watch的三种用法

var app = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3
  },
  watch: {
    // watch的第一种形式
    a: function (val, oldVal) {  // 在监听$route时，第一个参数表示to, 第二个参数表示from
      console.log()
    },
    // watch的第二种形式，注意当引用函数名时，必须用单引号
    b: 'going',
    // watch的第三种形式
    c: {
      handler: function (val, oldVal) {
        console.log(val)
      },
      deep: true, // 是否深度监听
      immediate: true // 是否立即执行handler函数
    }
  },
  methods: {
    going () {
      console.log(123)
    }
  }
})

在后台登录系统的登陆界面见过这几行代码：

data () {
	return {
		redirect: undefined
	}
}
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },

上述代码的意义是什么呢？
因为有immediate: true 说明加载登录页面时就会执行handler函数，handler的第一个参数表示to,
所以上述代码的意义就是，加载登录页后，直接获取，登录页地址栏的的redirect参数，赋值给this.redirect