ES6语法改写导致的错误求解

  • Z时代
  • 2024-02-18
  • 分类：IT

ES6语法改写导致的错误求解

研究Vue-Element-Template 这个vue admin 管理后台中，发现了一个问题

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

这部分我试图用ES6的语法改写变成

watch: {
  $route: {
    handler: (route) => {
      this.redirect = route.query && route.query.redirect
    },
    immediate: true
  }
},

console报错

vue.runtime.esm.js?2b0e:619 
[Vue warn]: Error in callback for immediate watcher "$route": "TypeError: Cannot set properties of undefined (setting 'redirect')"
TypeError: Cannot set properties of undefined (setting 'redirect')
at VueComponent.handler (index.vue?6ced:129:1)
at VueComponent.Vue.$watch (vue.runtime.esm.js?2b0e:4943:1)

为什么会这样呢？这里如果使用ES6 的语法改写应该是如何的呢？

该项目其他源码具体在 vue-admin-template login/index.vue部分中

回答：

这和写法无关，是 this 指向的问题，箭头函数和普通函数的区别，追求简洁的话，可以这样写

watch: {
  $route: {
    handler(route) {
      this.redirect = route.query && route.query.redirect;
    },
    immediate: true,
  },
};

回答：

function 函数体中访问的 this 则是函数执行时才确定的（当然也可以使用bind等方法修改）。
Vue 利用了这一特性，让开发者先拿this用着，后面Vue会帮忙把 this 指向Vue/Vue-conponent 的实例，vue-router 也是如此。
用箭头函数,Vue就帮不了你了，因为箭头函数体中访问的 this 是函数初始化的时候就确定的，Vue表示帮不了你。

以上是 ES6语法改写导致的错误求解 的全部内容， 来源链接： utcz.com/p/937177.html

回到顶部