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