vue watch的用法

最新推荐文章于 2025-07-04 16:05:28 发布

yaxi_yaxi_yaxi

最新推荐文章于 2025-07-04 16:05:28 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： watch vue

本文链接：https://blog.youkuaiyun.com/qq_35176916/article/details/88744836

vue 专栏收录该内容

12 篇文章

订阅专栏

博客介绍了vue watch的三种用法，以后台登录系统登录界面代码为例，解释了代码中因有immediate: true，加载登录页面时会执行handler函数，其作用是获取登录页地址栏的redirect参数并赋值给this.redirect。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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