Vue中關(guān)于this指向的問題示例詳解
在Vue中，方法體里用this調(diào)用vue實(shí)例的數(shù)據(jù)，有時(shí)會(huì)指向window，導(dǎo)致調(diào)用失敗報(bào)錯(cuò)。
由Vue管理的函數(shù)
例如：
computed計(jì)算屬性watch監(jiān)視屬性filters (Vue3中已棄用且不再支持)過濾器....
上述屬性里配置的函數(shù)不要采用箭頭函數(shù)寫法，因?yàn)榧^函數(shù)沒有自己的this對象，使用this時(shí)會(huì)向外找到window，不會(huì)指向Vue實(shí)例，也就調(diào)用不到Vue中的數(shù)據(jù)。
不被vue管理的函數(shù)
例如：
setTimeout計(jì)時(shí)器里的回調(diào)函數(shù)setInterval定時(shí)器里的回調(diào)函數(shù)ajax請求里的回調(diào)函數(shù)....
上述回調(diào)函數(shù)(除定時(shí)器外)使用普通函數(shù)定義的話，里面的this指向的是window，定時(shí)器中this指向undifined(這個(gè)死磕了老長時(shí)間，vscode沒提示，換webstorm調(diào)試出來的...)
用箭頭函數(shù)時(shí)，this會(huì)向函數(shù)外找，找到Vue實(shí)例（因?yàn)樵趘ue環(huán)境里嘛）。
this指向大致分類
奉上 菜鳥教程(yyds) 里大佬總結(jié)的
- 在對象方法中， this 指向調(diào)用它所在方法的對象。
- 單獨(dú)使用 this，它指向全局(Global)對象。
- 函數(shù)使用中，this 指向函數(shù)的所屬者。
- 嚴(yán)格模式下函數(shù)是沒有綁定到 this 上，這時(shí)候 this 是 undefined。在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
- apply 和 call 允許切換函數(shù)執(zhí)行的上下文環(huán)境（context），即 this 綁定的對象，可以將 this 引用到任何對象。
附上 菜鳥中介紹this的直達(dá)鏈接：this詳解
總結(jié)
在Vue環(huán)境里：
- 由Vue管理的函數(shù),盡量使用普通函數(shù)定義。
- 不被Vue管理的函數(shù)，盡量使用箭頭函數(shù)定義。
- 監(jiān)視屬性里的普通函數(shù)，函數(shù)體里要使用定時(shí)器的話，要用箭頭函數(shù)來定義定時(shí)器。(舉個(gè)栗子)
這樣保證this總是指向Vue實(shí)例，可以調(diào)用到Vue數(shù)據(jù)。
到此這篇關(guān)于Vue中關(guān)于this指向的問題 的文章就介紹到這了,更多相關(guān)vue this指向內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法
Axios是一款網(wǎng)絡(luò)前端請求框架，本文主要介紹了vue中Axios添加攔截器刷新token的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Ant?Design?Vue?修改表格頭部樣式的詳細(xì)代碼
這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個(gè)API，類型是一個(gè)函數(shù)，本文通過完整代碼給大家詳細(xì)講解，需要的朋友可以參考下2022-10-10
在Vue開發(fā)過程中解決和預(yù)防內(nèi)存泄漏問題的方法詳解
Vue作為一款流行的前端框架,已經(jīng)在許多項(xiàng)目中得到廣泛應(yīng)用,然而,隨著我們在Vue中構(gòu)建更大規(guī)模的應(yīng)用程序,我們可能會(huì)遇到一個(gè)嚴(yán)重的問題,那就是內(nèi)存泄漏,因此,我們需要認(rèn)識到在Vue開發(fā)過程中,內(nèi)存泄漏問題的重要性,本文將給大家介紹如何解決和預(yù)防內(nèi)存泄漏問題2023-10-10
Vue中watch監(jiān)聽第一次不觸發(fā)、深度監(jiān)聽問題
這篇文章主要介紹了Vue中watch監(jiān)聽第一次不觸發(fā)、深度監(jiān)聽問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue組合式API如何正確解構(gòu)props不會(huì)丟失響應(yīng)性
響應(yīng)式?API?賦予了組合式?API?一大坨可能性的同時(shí),代碼精簡,雖然但是,我們應(yīng)該意識到響應(yīng)性的某些陷阱,比如丟失響應(yīng)性,在本文中,我們將學(xué)習(xí)如何正確解構(gòu)?Vue?組件的?props,使得?props?不會(huì)丟失響應(yīng)性2024-01-01
這篇文章主要介紹了解決vue 局部過濾器獲取不到this的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼
本篇文章主要介紹了使用vue構(gòu)建移動(dòng)應(yīng)用實(shí)戰(zhàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
VScode中配置ESlint+Prettier詳細(xì)步驟(附圖文介紹)
這篇文章主要介紹了VScode中配置ESlint+Prettier詳細(xì)步驟,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-12-12
element plus tree拖動(dòng)節(jié)點(diǎn)交換位置和改變層級問題(解決方案)
圖層list里有各種組件,用element plus的tree來渲染,可以把圖片等組件到面板里,面板是容器,非容器組件,比如圖片、文本等,就不能讓其他組件拖進(jìn)來,這篇文章主要介紹了element plus tree拖動(dòng)節(jié)點(diǎn)交換位置和改變層級問題(解決方案),需要的朋友可以參考下2024-04-04
vue使用map代替Aarry數(shù)組循環(huán)遍歷的方法
這篇文章主要介紹了vue使用map代替Aarry數(shù)組循環(huán)遍歷的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04