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