vue中关于computed的this指向问题
更新时间：2023年07月03日 15:37:23 作者：一只叮code的小蚊子
这篇文章主要介绍了vue中关于computed的this指向问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
关于computed的this指向
在写vue项目时，用到了computed计算属性，遇到了使用箭头函数出现this指向问题，这里记录下
箭头函数中的this
- 箭头函数内部的this是词法作用域，由上下文确定
- 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
vue中的computed
list: () => {
console.log(this)
}
- 不使用箭头函数
allFigure: function() {
console.log(this)
},
- 使用get()
allFigure: {
get() {
console.log(this);
}
}
自己的理解
- 在computed中使用箭头函数的话，会导致this指向的不是整个的vueComponent
- 此时使用allFigure: function() {}的形式就可以解决，this指向了vueComponent
- 或者使用对象的形式，用set()、get()方法也不会出现问题
vue实例内部方法的this指向问题
如果是vue实例本身的属性和方法，那么this指向就是vue实例本身，比如methods对象，computed对象，watch对象里的方法，要用方法名(){}写，就代表this指向是vue实例，如果使用()=>{}箭头函数的方式定义方法，则this指向window，因为箭头函数中的this指向的是外部函数的this指向，普通函数的this指向的是它的调用者，而vue中的methods和computed和watch和各种回调钩子，因为他们是vue本身的方法所以只要他们使用普通函数定义this当然指向他们的调用者即this
除了这些一级方法，二级方法啥的最好都用箭头函数，因为箭头函数this指向外部函数的this，这些二级函数外部正好是一级函数，一级函数的this正好的vue，所以正好nice.
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了vue 项目如何引入微信sdk接口的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了vue引入axios同源跨域问题，文章给大家提供了解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue实现直播间点赞飘心效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
本篇文章主要介绍了基于vue.js 2.x的虚拟滚动条的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
前端使用uniapp开发项目完成后，需要将页面打包，生成H5的静态文件，部署在服务器上这样通过服务器链接地址，直接可以在手机上点开来访问，下面小编给大家讲解uniapp开发打包成H5部署到服务器的步骤，感兴趣的朋友一起看看吧2022-11-11
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
这篇文章主要介绍了antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue项目两种方式实现竖向表格的思路分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了Vue Router4与Router3路由配置与区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-12-12
这篇文章主要介绍了vue this.$toast 失效问题汇总,本文给大家分享完美解决方案，感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要给大家介绍了关于vue/cli安装报错及解决问题的方法,如果在安装@vue/cli时遇到错误,大家可以尝试以下步骤解决,需要的朋友可以参考下2023-07-07
最新评论