在Vue中，方法體里用this調用vue實例的數(shù)據(jù)，有時會指向window，導致調用失敗報錯。

由Vue管理的函數(shù)

例如：

• computed 計算屬性
• watch 監(jiān)視屬性
• filters (Vue3中已棄用且不再支持) 過濾器....

上述屬性里配置的函數(shù)不要采用箭頭函數(shù)寫法，因為箭頭函數(shù)沒有自己的this對象，使用this時會向外找到window，不會指向Vue實例，也就調用不到Vue中的數(shù)據(jù)。

不被vue管理的函數(shù)

例如：

• setTimeout計時器里的回調函數(shù)
• setInterval定時器里的回調函數(shù)
• ajax請求里的回調函數(shù)....

上述回調函數(shù)(除定時器外)使用普通函數(shù)定義的話，里面的this指向的是window，定時器中this指向undifined(這個死磕了老長時間，vscode沒提示，換webstorm調試出來的...)

用箭頭函數(shù)時，this會向函數(shù)外找，找到Vue實例（因為在vue環(huán)境里嘛）。

this指向大致分類

奉上 菜鳥教程(yyds) 里大佬總結的

• 在對象方法中， this 指向調用它所在方法的對象。
• 單獨使用 this，它指向全局(Global)對象。
• 函數(shù)使用中，this 指向函數(shù)的所屬者。
• 嚴格模式下函數(shù)是沒有綁定到 this 上，這時候 this 是 undefined。在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
• apply 和 call 允許切換函數(shù)執(zhí)行的上下文環(huán)境（context），即 this 綁定的對象，可以將 this 引用到任何對象。

附上 菜鳥中介紹this的直達鏈接：this詳解

總結

在Vue環(huán)境里：

• 由Vue管理的函數(shù),盡量使用普通函數(shù)定義。
• 不被Vue管理的函數(shù)，盡量使用箭頭函數(shù)定義。
• 監(jiān)視屬性里的普通函數(shù)，函數(shù)體里要使用定時器的話，要用箭頭函數(shù)來定義定時器。(舉個栗子)

這樣保證this總是指向Vue實例，可以調用到Vue數(shù)據(jù)。

到此這篇關于Vue中關于this指向的問題 的文章就介紹到這了,更多相關vue this指向內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論