vue watch的三种用法

2022-02-07 11:02:24 阅读：157 来源： 互联网

标签：redirect vue console route watch 用法 handler true

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

标签：redirect,vue,console,route,watch,用法,handler,true
来源： https://www.cnblogs.com/webSnow/p/15867252.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue watch的三种用法