vue中computed下使用箭頭函數(shù)會報錯問題及解決
更新時間：2023年07月03日 14:32:38 作者：Leon_94
這篇文章主要介紹了vue中computed下使用箭頭函數(shù)會報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue中computed下使用箭頭函數(shù)會報錯
computed: {
myPhone: () => {
let num3 = this.mobile.slice(-4);
let num1 = this.mobile.slice(0,-8);
let str = `${num1}****${num3}`;
return str;
}
}這種情況下會報一個這樣的錯，其實并不是slice方法的原因，而是我們在computed中使用了箭頭函數(shù)
我們把箭頭函數(shù)換掉，就不會再報錯了。
首先我們來說一下computed的作用
- 和普通屬性一樣是在模板中綁定計算屬性，當(dāng)data中對應(yīng)數(shù)據(jù)發(fā)生改變時，計算屬性值會隨之改變。
- 計算屬性compute是基于他們的依賴（如果是實例范疇之外的依賴，比如非響應(yīng)式的notreactive是不會觸發(fā)屬性更新的）進行緩存(計算屬性的結(jié)果會被緩存)，只有相關(guān)依賴會發(fā)生改變時才會重新求值，未改變只會返回只之前的結(jié)果，不在執(zhí)行函數(shù)
所以
計算屬性computed不應(yīng)該使用箭頭函數(shù)來定義計算屬性 因為箭頭函數(shù)綁定了父級作用域的上下文，所以 this 將不會按照期望指向Vue
vue中computed使用es6中箭頭函數(shù)，找不到定義的變量問題
本人不建議在computed中使用es6箭頭函數(shù)
建議直接改為es5匿名函數(shù)寫法
原因
箭頭函數(shù)的this 指向箭頭函數(shù)定義時所處的對象，而不是箭頭函數(shù)使用時所在的對象，默認(rèn)使用父級的this。
首先從它的父級作用域中找，如果父級作用域還是箭頭函數(shù)，再往上層找，如此直至找到this的指向在computed中使用this，由于箭頭函數(shù)綁定了父級作用域的上下文，所以 this 將不會按照期望指向Vue
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，今天通過本文給大家分享VSCode開發(fā)UNI-APP 配置教程及插件推薦與注意事項，感興趣的朋友一起看看吧2021-08-08
element-plus日歷(Calendar)動態(tài)渲染以及避坑指南
這篇文章主要給大家介紹了關(guān)于element-plus日歷(Calendar)動態(tài)渲染以及避坑指南的相關(guān)資料,這是最近幫一個后端朋友處理一個前端問題,elementUI中calendar日歷組件內(nèi)容進行自定義顯示,實現(xiàn)類似通知事項的日歷效果,需要的朋友可以參考下2023-08-08
VUE + UEditor 單圖片跨域上傳功能的實現(xiàn)方法
這篇文章主要介紹了VUE + UEditor 單圖片跨域上傳功能的實現(xiàn)方法，需要的朋友參考下2018-02-02
關(guān)于vue設(shè)置環(huán)境變量全流程
這篇文章主要介紹了關(guān)于vue設(shè)置環(huán)境變量全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue.js實現(xiàn)大屏數(shù)字滾動翻轉(zhuǎn)效果
大屏數(shù)字滾動翻轉(zhuǎn)效果來源于最近工作中element后臺管理頁面一張大屏的UI圖，該UI圖上有一個模塊需要有數(shù)字往上翻動的效果。本文通過截圖代碼的形式給大家介紹Vue.js實現(xiàn)大屏數(shù)字滾動翻轉(zhuǎn)效果，感興趣的朋友一起看看吧2019-11-11
vue.js2.0 實現(xiàn)better-scroll的滾動效果實例詳解
better-scroll 是一個移動端滾動的解決方案，它是基于 iscroll 的重寫。better-scroll 也很強大，不僅可以做普通的滾動列表，還可以做輪播圖、picker 等等，下面通過本文給大家介紹vue.js2.0 實現(xiàn)better-scroll的滾動效果，感興趣的朋友一起看看吧2018-08-08
在開發(fā)中發(fā)現(xiàn)其中一個頁面moutned調(diào)用了兩次，而其他頁面正常，表示很懵逼，然后查找原因，終于找到了，其實歸根到底是要知道m(xù)ounted的調(diào)用機制問題。這篇文章主要介紹了vue mounted 調(diào)用兩次的解決辦法,需要的朋友可以參考下2018-10-10
Vue?是如何將一份模板轉(zhuǎn)換為真實的?DOM?節(jié)點的,又是如何高效地更新這些節(jié)點的呢,這些都離不開虛擬dom這個概念,下面我們就來了解下虛擬dom這個概念以及它是什么吧2024-01-01
今天小編就為大家分享一篇vue 返回上一頁,頁面樣式錯亂的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在 Vue CLI 創(chuàng)建的項目中,vue.config.js 是核心配置文件,用于定制化構(gòu)建、開發(fā)和部署流程,本文詳細(xì)解析了該文件的常用配置項,并結(jié)合代碼示例和表格說明,幫助開發(fā)者高效管理項目配置,提升開發(fā)體驗,需要的朋友可以參考下2025-04-04