vue 下拉框 VUE this丟失

最近在乙個 vue 的專案中重構功能時，遇到乙個有趣的問題，場景是通過介面動態獲取名稱並顯示在下拉列表中，第一次實現的**如下：

但這樣寫**可擴充套件性很低，例如這時候需要新增乙個查詢使用者身份的下拉框就要再寫乙個方法，為了避免複製一堆重複**。所以我做了一些修改：

但是在執行後，輸入名稱，檢視中的 option 卻沒有如預期一樣更新後端返回的資料。檢視控制台 network 發起了請求，vue-tools 中檢視 this[typename] 的確是更新後的值。突然就有點懵了，問題出在什麼地方？

分析

在**中分別列印 this1 和 this2 兩個值，發現他們的 _uid 竟然不一樣，再看看 this1 中的資料被響應式的更新，但是 this2 中根本沒有。

_uid 不一致

原因

method 中的方法是在 vue 例項初始化階段（init）進行繫結 this，指向當前 vue 例項；而 template 中的**是在 render 階段執行，導致匿名函式的 this 指向**執行時的上下文，它也是乙個 vuecomponent 例項，但不是同乙個。

解決

辦法是用箭頭函式替換普通 function，因為箭頭函式 this 繼承自它的外層，且無法被修改。這樣就保證 this 不會丟失。

修改後 _uid 一致

react 類元件在呼叫方法時也遇到過 this 丟失的問題，同樣可以使用箭頭函式來解決這個問題，而且兩者造成 this 丟失的原因也非常類似。

回過頭想一想，還是印證了那句老話：日光之下，並無新事。