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ā)屬性更新的）進(jìn)行緩存(計算屬性的結(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)文章
ant design vue 表格table 默認(rèn)勾選幾項的操作
這篇文章主要介紹了ant design vue 表格table 默認(rèn)勾選幾項的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Vue3項目打包后部署到服務(wù)器 請求不到后臺接口解決方法
在本篇文章里小編給大家整理了關(guān)于Vue3項目打包后部署到服務(wù)器 請求不到后臺接口解決方法，有需要的朋友們可以參考下。2020-02-02
這篇文章給大家介紹了vue項目全局配置微信分享思路講解，使用vue作為框架，使用vux作為ui組件庫，具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要介紹了vue中v-html妙用及空白行消除方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
在本篇文章里小編給大家整理的是關(guān)于Vue路由前后端設(shè)計的知識點總結(jié)內(nèi)容，需要的朋友們參考下。2019-08-08
在Vue前端(Vue2/Vue3?通用)載入JSON格式的動圖實例代碼
這篇文章主要介紹了在Vue前端(Vue2/Vue3?通用)載入JSON格式動圖的相關(guān)資料,文中通過代碼講解了環(huán)境配置、組件集成、動畫控制等,重點介紹了Lottie的loadAnimation方法的參數(shù)配置和常見問題解決方法,需要的朋友可以參考下2025-11-11
這篇文章主要給大家介紹了關(guān)于vite基本常見配置講解的相關(guān)資料,最近做項目要求將webpack打包方式換成vite,下面將詳細(xì)講解一下配置vite需要改動的東西,需要的朋友可以參考下2023-11-11
vue3?element-plus實現(xiàn)圖片預(yù)覽功能實例
這篇文章主要給大家介紹了關(guān)于vue3?element-plus實現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項目中我們經(jīng)常會碰到圖片預(yù)覽的功能需求,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue-router的beforeRouteUpdate不觸發(fā)問題
這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04