IT技术 - VueJS：为什么“这个”未定义？ - 吾爱随笔录

IT技术 javascript vue.js this vuejs2

2021-01-10 23:06:11

我正在使用Vue.js创建一个组件。

当我引用this中的任何所述的生命周期钩（created，mounted，updated等等）它的计算结果为undefined：

mounted: () => {
  console.log(this); // logs "undefined"
},

同样的事情也在我的计算属性中发生：

computed: {
  foo: () => { 
    return this.bar + 1; 
  } 
}

我收到以下错误：

未捕获的类型错误：无法读取未定义的属性“bar”

在这些情况下为什么要this评估undefined？

4个回答

这两个示例都使用箭头函数 () => { }，它绑定this到与 Vue 实例不同的上下文。

根据文档：

不要在实例属性或回调（例如vm.$watch('a', newVal => this.myMethod())）上使用箭头函数。由于箭头函数绑定到父上下文，this因此不会像您期望的那样是 Vue 实例并且this.myMethod将是未定义的。

为了获得this作为 Vue 实例的正确引用，请使用常规函数：

mounted: function () {
  console.log(this);
}

或者，您也可以对函数使用ECMAScript 5 速记：

mounted() {
  console.log(this);
}

它的实际工作，能有人注意到之间的差异function()和()=>？

2021-03-19 23:06:11

你知道为什么我必须使用反向（从functionto切换arrow function）才能this在then()回调中使用吗？ github.com/Inndy/vue-clipboard2#sample-2

2021-03-26 23:06:11

@NickeManarin 您作为回调传递的函数then有它自己的this，因此要this引用父级的上下文，您可以使用箭头函数。看到这个帖子：stackoverflow.com/questions/20279484/...

2021-03-27 23:06:11

谢谢！它是如此明显，同时又如此有用。感觉只是一个upvote是不够的！

2021-04-05 23:06:11

您正在使用箭头函数。

该Vue的文件中明确规定不能在属性或回调使用箭头功能。

与常规函数不同，箭头函数不绑定this。相反，this在词法上是绑定的（即this保留其原始上下文的含义）。

var instance = new  Vue({
    el:'#instance',
  data:{
    valueOfThis:null
  },
  created: ()=>{
    console.log(this)
  }
});

这会在控制台中记录以下对象：

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

而...如果我们使用常规函数（我们应该在 Vue 实例上使用）

var instance = new  Vue({
    el:'#instance',
  data:{
    valueOfThis:null
  },
  created: function(){
    console.log(this)
  }
});

在控制台中记录以下对象：

hn {_uid: 0, _isVue: true, $options: {…}, _renderProxy: hn, _self: hn, …}

如果您想继续使用箭头函数，您可以将组件实例 ( this) 作为参数传递，如：

computed: {
  foo: (vm) => { //vm refers to this 
    return vm.bar + 1; 
  } 
}

如果你想使用this.你不能使用箭头功能。因为箭头函数没有绑定this。

2021-03-14 23:06:11

其它你可能感兴趣的问题