vue中關(guān)于computed的this指向問(wèn)題
關(guān)于computed的this指向
在寫(xiě)vue項(xiàng)目時(shí)，用到了computed計(jì)算屬性，遇到了使用箭頭函數(shù)出現(xiàn)this指向問(wèn)題，這里記錄下
箭頭函數(shù)中的this
- 箭頭函數(shù)內(nèi)部的this是詞法作用域，由上下文確定
- 函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象
vue中的computed
list: () => {
console.log(this)
}
- 不使用箭頭函數(shù)
allFigure: function() {
console.log(this)
},
- 使用get()
allFigure: {
get() {
console.log(this);
}
}
自己的理解
- 在computed中使用箭頭函數(shù)的話，會(huì)導(dǎo)致this指向的不是整個(gè)的vueComponent
- 此時(shí)使用allFigure: function() {}的形式就可以解決，this指向了vueComponent
- 或者使用對(duì)象的形式，用set()、get()方法也不會(huì)出現(xiàn)問(wèn)題
vue實(shí)例內(nèi)部方法的this指向問(wèn)題
如果是vue實(shí)例本身的屬性和方法，那么this指向就是vue實(shí)例本身，比如methods對(duì)象，computed對(duì)象，watch對(duì)象里的方法，要用方法名(){}寫(xiě)，就代表this指向是vue實(shí)例，如果使用()=>{}箭頭函數(shù)的方式定義方法，則this指向window，因?yàn)榧^函數(shù)中的this指向的是外部函數(shù)的this指向，普通函數(shù)的this指向的是它的調(diào)用者，而vue中的methods和computed和watch和各種回調(diào)鉤子，因?yàn)樗麄兪莢ue本身的方法所以只要他們使用普通函數(shù)定義this當(dāng)然指向他們的調(diào)用者即this
除了這些一級(jí)方法，二級(jí)方法啥的最好都用箭頭函數(shù)，因?yàn)榧^函數(shù)this指向外部函數(shù)的this，這些二級(jí)函數(shù)外部正好是一級(jí)函數(shù)，一級(jí)函數(shù)的this正好的vue，所以正好nice.
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3中使用sse最佳實(shí)踐,封裝工具,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue實(shí)現(xiàn)阻止瀏覽器記住密碼功能的三種方法
本文主要介紹了Vue實(shí)現(xiàn)阻止瀏覽器記住密碼功能的三種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
基于vue 實(shí)現(xiàn)表單中password輸入的顯示與隱藏功能
這篇文章主要介紹了vue 實(shí)現(xiàn)表單中password輸入的顯示與隱藏功能 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js第四天的學(xué)習(xí)筆記，json數(shù)組數(shù)據(jù)以csv格式導(dǎo)出,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
解決betterScroll在vue中存在圖片時(shí),出現(xiàn)拉不動(dòng)的問(wèn)題
今天小編就為大家分享一篇解決betterScroll在vue中存在圖片時(shí),出現(xiàn)拉不動(dòng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue報(bào)錯(cuò)Error:Cannot?find?module?'fs/promises'的解決方
最近的項(xiàng)目需要用到vue/cli,但是用cnpm安裝vue/cli的時(shí)候報(bào)錯(cuò)了,下面這篇文章主要給大家介紹了關(guān)于vue報(bào)錯(cuò)Error:Cannot?find?module?'fs/promises'的解決方式,需要的朋友可以參考下2022-11-11
vue?el-table中使用el-select選中后無(wú)效的解決
這篇文章主要介紹了vue?el-table中使用el-select選中后無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
查找Vue中下標(biāo)的操作(some和findindex)
這篇文章主要介紹了查找Vue中下標(biāo)的操作(some和findindex)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue中在vuex的actions中請(qǐng)求數(shù)據(jù)實(shí)例
今天小編就為大家分享一篇vue中在vuex的actions中請(qǐng)求數(shù)據(jù)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了vue如何自定義地址設(shè)置@，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03