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對(duì)象，使用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請(qǐng)求里的回調(diào)函數(shù)....
上述回調(diào)函數(shù)(除定時(shí)器外)使用普通函數(shù)定義的話，里面的this指向的是window，定時(shí)器中this指向undifined(這個(gè)死磕了老長(zhǎng)時(shí)間，vscode沒提示，換webstorm調(diào)試出來的...)
用箭頭函數(shù)時(shí)，this會(huì)向函數(shù)外找，找到Vue實(shí)例（因?yàn)樵趘ue環(huán)境里嘛）。
this指向大致分類
奉上 菜鳥教程(yyds) 里大佬總結(jié)的
- 在對(duì)象方法中， this 指向調(diào)用它所在方法的對(duì)象。
- 單獨(dú)使用 this，它指向全局(Global)對(duì)象。
- 函數(shù)使用中，this 指向函數(shù)的所屬者。
- 嚴(yán)格模式下函數(shù)是沒有綁定到 this 上，這時(shí)候 this 是 undefined。在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
- apply 和 call 允許切換函數(shù)執(zhí)行的上下文環(huán)境（context），即 this 綁定的對(duì)象，可以將 this 引用到任何對(duì)象。
附上 菜鳥中介紹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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue?實(shí)現(xiàn)新國(guó)標(biāo)紅綠燈效果實(shí)例詳解
這篇文章主要為大家介紹了Vue?實(shí)現(xiàn)新國(guó)標(biāo)紅綠燈效果實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了vue和react中關(guān)于插槽詳解，slot插槽是Vue對(duì)組件嵌套這種擴(kuò)展機(jī)制的稱謂，在react可以也這樣稱呼，但是并不很常見。不過叫slot確實(shí)很形象2022-08-08
關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞,參數(shù)獲取
這篇文章主要介紹了關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞，參數(shù)獲取方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
解決echarts圖表y軸數(shù)據(jù)間隔過大的問題
這篇文章主要介紹了解決echarts圖表y軸數(shù)據(jù)間隔過大的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue使用socket與服務(wù)端進(jìn)行通信的代碼詳解
這篇文章主要給大家介紹了vue如何使用socket與服務(wù)端進(jìn)行通信的相關(guān)資料,在Vue中我們可以將Websocket類封裝成一個(gè)Vue插件,以便全局使用,需要的朋友可以參考下2023-09-09
Vite處理html模板插件之vite-plugin-html插件使用
這篇文章主要給大家介紹了關(guān)于Vite處理html模板插件之vite-plugin-html插件使用的相關(guān)資料,Vite是一個(gè)現(xiàn)代化的前端構(gòu)建工具,而vite-plugin-html是Vite的一個(gè)插件,用于在構(gòu)建時(shí)自動(dòng)生成HTML文件,需要的朋友可以參考下2023-10-10
小編使用的是webpack模板在vue-cli生成的工程中引入jquery的方法，首先在package.json里的dependencies加入"jquery" : "^2.2.3"，然后install，具體內(nèi)容詳情大家參考下本文2018-01-01
vue實(shí)現(xiàn)日歷表格（element-ui）
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)日歷表格（element-ui），文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
vue使用動(dòng)畫實(shí)現(xiàn)滾動(dòng)表格效果
這篇文章主要為大家詳細(xì)介紹了vue使用動(dòng)畫實(shí)現(xiàn)滾動(dòng)表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)web分頁組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11