详解vue中的computed的this指向问题
更新时间：2018年12月05日 14:32:54 作者：ZJW0215
这篇文章主要介绍了详解vue中的computed的this指向问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
今天在写vue项目时，用到了computed计算属性，遇到了使用箭头函数出现this指向问题，这里记录下
1.箭头函数中的this
- 箭头函数内部的this是词法作用域，由上下文确定
- 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
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()方法也不会出现问题
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解Vuex下Store的模块化拆分实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了vue拦截器如何增加token参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue实现一个简单的吸顶、锚点和滚动高亮按钮效果,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了在Vue 中实现循环渲染多个相同echarts图表，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家介绍了tauri和vue通信的问题解决方案示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
vue-element-admin开发教程(v4.0.0之前)
本文主要介绍了vue-element-admin开发教程(v4.0.0之前)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
vue elementUI select下拉框如何设置默认值
这篇文章主要介绍了vue elementUI select下拉框如何设置默认值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
webpack4+Vue搭建自己的Vue-cli项目过程分享
这篇文章主要介绍了webpack4+Vue搭建自己的Vue-cli，对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛,感兴趣的朋友跟随脚本之家小编一起看看吧2018-08-08
这篇文章主要为大家介绍了Vue3必学技巧-自定义Hooks-让写Vue3更畅快示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue项目中axios的封装请求，axios 是一个轻量的HTTP客户端，它基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，下文更多详细资料,需要的朋友可以参考一下2022-03-03
最新评论