本文探讨Vue中computed计算属性使用箭头函数时导致的this指向错误问题。通过对比普通函数与对象形式的get/set方法，说明如何正确获取vueComponent实例，确保计算属性正常工作。
引言：Vue computed中的this指向问题
在开发Vue项目过程中，使用computed计算属性时，若采用箭头函数定义，可能会遇到this指向异常的情况。本文对此现象进行记录与分析。
箭头函数的this绑定机制
1. 箭头函数中的this特性
- 箭头函数内部的this绑定遵循词法作用域规则，由定义时的上下文决定。
- 函数体内的this对象指向定义该函数时所在的对象，而非调用时的对象。
Vue computed的三种定义方式
2. Vue中computed的计算方式
尝试使用箭头函数定义计算属性。
list: () => {
console.log(this)
}
不使用箭头函数，即使用普通函数定义。
allFigure: function() {
console.log(this)
},
采用对象形式，显式定义get()方法。
allFigure: {
get() {
console.log(this);
}
}
解决方案与总结
3. 个人理解与总结
- 在computed中使用箭头函数，会导致this不指向vueComponent实例。
- 此时改用匿名函数（普通函数）形式，this即可正确指向vueComponent。
- 或者使用对象形式，通过定义set()和get()方法，也能避免此类问题。
以上内容为本文主要观点，希望对读者学习Vue有所帮助，欢迎支持。