Vue中關於this指向的問題

• 2022 年 7 月 20 日
• 筆記
• javascript, VUE

由Vue管理的函數

例如：

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

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

不被vue管理的函數

例如：

• setTimeout計時器里的回調函數
• setInterval定時器里的回調函數
• ajax請求里的回調函數
• ….

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

用箭頭函數時，this會向函數外找，找到Vue實例（因為在vue環境里嘛）。

this指向大致分類

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

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

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

總結

在Vue環境里：

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

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

有很多前輩寫的太高奧了，，越看越迷都迷了，，這裡寫個總結當備忘，足夠用了，以後有時間了學透了再補充