vue中computed下使用箭頭函數(shù)會(huì)報(bào)錯(cuò)問(wèn)題及解決
vue中computed下使用箭頭函數(shù)會(huì)報(bào)錯(cuò)
computed: {
myPhone: () => {
let num3 = this.mobile.slice(-4);
let num1 = this.mobile.slice(0,-8);
let str = `${num1}****${num3}`;
return str;
}
}這種情況下會(huì)報(bào)一個(gè)這樣的錯(cuò)，其實(shí)并不是slice方法的原因，而是我們?cè)赾omputed中使用了箭頭函數(shù)
我們把箭頭函數(shù)換掉，就不會(huì)再報(bào)錯(cuò)了。
首先我們來(lái)說(shuō)一下computed的作用
- 和普通屬性一樣是在模板中綁定計(jì)算屬性，當(dāng)data中對(duì)應(yīng)數(shù)據(jù)發(fā)生改變時(shí)，計(jì)算屬性值會(huì)隨之改變。
- 計(jì)算屬性compute是基于他們的依賴（如果是實(shí)例范疇之外的依賴，比如非響應(yīng)式的notreactive是不會(huì)觸發(fā)屬性更新的）進(jìn)行緩存(計(jì)算屬性的結(jié)果會(huì)被緩存)，只有相關(guān)依賴會(huì)發(fā)生改變時(shí)才會(huì)重新求值，未改變只會(huì)返回只之前的結(jié)果，不在執(zhí)行函數(shù)
所以
計(jì)算屬性computed不應(yīng)該使用箭頭函數(shù)來(lái)定義計(jì)算屬性 因?yàn)榧^函數(shù)綁定了父級(jí)作用域的上下文，所以 this 將不會(huì)按照期望指向Vue
vue中computed使用es6中箭頭函數(shù)，找不到定義的變量問(wèn)題
本人不建議在computed中使用es6箭頭函數(shù)
建議直接改為es5匿名函數(shù)寫法
原因
箭頭函數(shù)的this 指向箭頭函數(shù)定義時(shí)所處的對(duì)象，而不是箭頭函數(shù)使用時(shí)所在的對(duì)象，默認(rèn)使用父級(jí)的this。
首先從它的父級(jí)作用域中找，如果父級(jí)作用域還是箭頭函數(shù)，再往上層找，如此直至找到this的指向在computed中使用this，由于箭頭函數(shù)綁定了父級(jí)作用域的上下文，所以 this 將不會(huì)按照期望指向Vue
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
ant design vue 表格table 默認(rèn)勾選幾項(xiàng)的操作
這篇文章主要介紹了ant design vue 表格table 默認(rèn)勾選幾項(xiàng)的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Vue3項(xiàng)目打包后部署到服務(wù)器 請(qǐng)求不到后臺(tái)接口解決方法
在本篇文章里小編給大家整理了關(guān)于Vue3項(xiàng)目打包后部署到服務(wù)器 請(qǐng)求不到后臺(tái)接口解決方法，有需要的朋友們可以參考下。2020-02-02
這篇文章給大家介紹了vue項(xiàng)目全局配置微信分享思路講解，使用vue作為框架，使用vux作為ui組件庫(kù)，具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要介紹了vue中v-html妙用及空白行消除方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
在本篇文章里小編給大家整理的是關(guān)于Vue路由前后端設(shè)計(jì)的知識(shí)點(diǎn)總結(jié)內(nèi)容，需要的朋友們參考下。2019-08-08
在Vue前端(Vue2/Vue3?通用)載入JSON格式的動(dòng)圖實(shí)例代碼
這篇文章主要介紹了在Vue前端(Vue2/Vue3?通用)載入JSON格式動(dòng)圖的相關(guān)資料,文中通過(guò)代碼講解了環(huán)境配置、組件集成、動(dòng)畫控制等,重點(diǎn)介紹了Lottie的loadAnimation方法的參數(shù)配置和常見(jiàn)問(wèn)題解決方法,需要的朋友可以參考下2025-11-11
這篇文章主要給大家介紹了關(guān)于vite基本常見(jiàn)配置講解的相關(guān)資料,最近做項(xiàng)目要求將webpack打包方式換成vite,下面將詳細(xì)講解一下配置vite需要改動(dòng)的東西,需要的朋友可以參考下2023-11-11
vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項(xiàng)目中我們經(jīng)常會(huì)碰到圖片預(yù)覽的功能需求,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue-router的beforeRouteUpdate不觸發(fā)問(wèn)題
這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04