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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，今天通过本文给大家分享VSCode开发UNI-APP 配置教程及插件推荐与注意事项，感兴趣的朋友一起看看吧2021-08-08
element-plus日历(Calendar)动态渲染以及避坑指南
这篇文章主要给大家介绍了关于element-plus日历(Calendar)动态渲染以及避坑指南的相关资料,这是最近帮一个后端朋友处理一个前端问题,elementUI中calendar日历组件内容进行自定义显示,实现类似通知事项的日历效果,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了VUE + UEditor 单图片跨域上传功能的实现方法，需要的朋友参考下2018-02-02
这篇文章主要介绍了关于vue设置环境变量全流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图，该UI图上有一个模块需要有数字往上翻动的效果。本文通过截图代码的形式给大家介绍Vue.js实现大屏数字滚动翻转效果，感兴趣的朋友一起看看吧2019-11-11
vue.js2.0 实现better-scroll的滚动效果实例详解
better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等，下面通过本文给大家介绍vue.js2.0 实现better-scroll的滚动效果，感兴趣的朋友一起看看吧2018-08-08
在开发中发现其中一个页面moutned调用了两次，而其他页面正常，表示很懵逼，然后查找原因，终于找到了，其实归根到底是要知道mounted的调用机制问题。这篇文章主要介绍了vue mounted 调用两次的解决办法,需要的朋友可以参考下2018-10-10
Vue 是如何将一份模板转换为真实的 DOM 节点的,又是如何高效地更新这些节点的呢,这些都离不开虚拟dom这个概念,下面我们就来了解下虚拟dom这个概念以及它是什么吧2024-01-01
今天小编就为大家分享一篇vue 返回上一页,页面样式错乱的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
在 Vue CLI 创建的项目中,vue.config.js 是核心配置文件,用于定制化构建、开发和部署流程,本文详细解析了该文件的常用配置项,并结合代码示例和表格说明,帮助开发者高效管理项目配置,提升开发体验,需要的朋友可以参考下2025-04-04
最新评论