为什么 Vue.js 生命周期挂钩和计算属性中的'this”变得未定义？

VueJS: "this" 在生命周期钩子和计算属性中未定义

在 Vue.js 中，你可能会遇到访问 "this" 的情况” 生命周期挂钩或计算属性中的关键字返回“未定义”。使用箭头函数时会发生这种情况。

原因：

箭头函数 () =>; {} 将“this”关键字绑定到 Vue 实例外部的上下文。这意味着箭头函数中的“this”指的是父作用域，而不是 Vue 实例本身。

示例 1：

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

在此示例中，用于“mounted”钩子的箭头函数不会将“this”绑定到Vue

示例 2：

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

这里，计算属性使用箭头函数，这会导致对“this.bar”的引用求值为 undefined ，导致错误“无法读取属性‘bar’

解决方案：

要解决此问题并访问对“this”的正确引用，请使用常规函数或 ES5 简写：

常规函数：

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

ES5简写：

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

通过使用这些方法，您可以确保“this”在生命周期内引用Vue实例钩子和计算属性。

以上是为什么 Vue.js 生命周期挂钩和计算属性中的'this”变得未定义？的详细内容。更多信息请关注PHP中文网其他相关文章！