vue中computed下使用箭头函数会报错问题及解决
更新时间：2023年07月03日 14:32:38 作者：Leon_94
这篇文章主要介绍了vue中computed下使用箭头函数会报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue中computed下使用箭头函数会报错
computed: {
myPhone: () => {
let num3 = this.mobile.slice(-4);
let num1 = this.mobile.slice(0,-8);
let str = `${num1}****${num3}`;
return str;
}
}这种情况下会报一个这样的错，其实并不是slice方法的原因，而是我们在computed中使用了箭头函数
我们把箭头函数换掉，就不会再报错了。
首先我们来说一下computed的作用
- 和普通属性一样是在模板中绑定计算属性，当data中对应数据发生改变时，计算属性值会随之改变。
- 计算属性compute是基于他们的依赖（如果是实例范畴之外的依赖，比如非响应式的notreactive是不会触发属性更新的）进行缓存(计算属性的结果会被缓存)，只有相关依赖会发生改变时才会重新求值，未改变只会返回只之前的结果，不在执行函数
所以
计算属性computed不应该使用箭头函数来定义计算属性 因为箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向Vue
vue中computed使用es6中箭头函数，找不到定义的变量问题
本人不建议在computed中使用es6箭头函数
建议直接改为es5匿名函数写法
原因
箭头函数的this 指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this。
首先从它的父级作用域中找，如果父级作用域还是箭头函数，再往上层找，如此直至找到this的指向在computed中使用this，由于箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向Vue
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何搭建一个完整的Vue3.0+ts的项目步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了在vue项目中使用Swiper插件详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
Pinia是一个Vue.js状态管理库，如果你在组件中修改了store中的数据并刷新了界面，Pinia会将store中的数据重置为初始值，从而导致数据丢失的问题，本文就来介绍一下问题解决，感兴趣的可以了解一下2023-12-12
Vue Computed中get和set的用法及Computed与watch的区别
这篇文章主要介绍了Vue Computed中get和set的用法及Computed与watch的区别,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
vue实现一个矩形标记区域(rectangle marker)的方法
这篇文章主要介绍了vue实现一个矩形标记区域 rectangle marker的方法，帮助大家实现区域标记功能，感兴趣的朋友可以了解下2020-10-10
插槽slot可以说在一个Vue项目里面处处都有它的身影，比如我们使用一些UI组件库的时候，我们通常可以使用插槽来自定义我们的内容，这篇文章主要介绍了Vue3中slot插槽使用方式,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue实现数字金额动态变化效果，数字动态变化是我们在前端开发中经常需要做的效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-09-09
VUE使用vue create命令创建vue2.0项目的全过程
vue-cli是创建Vue项目的一个脚手架工具,vue-cli提供了vue create等命令,下面这篇文章主要给大家介绍了关于VUE使用vue create命令创建vue2.0项目的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Vue如何循环提取对象数组中的值,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
这篇文章主要为大家详细介绍了Vue.use源码，Vue.use方法的引入，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
最新评论