使用 ref 來定位 DOM 節(jié)點很方便。但是期間遇到了一個問題，就是在生命周期 mounted 鉤子函數(shù)里面使用 this.$refs.xx，打印出來的卻是 undefined？

如果在 DOM 結構中的某個 DOM 節(jié)點使用了 v-if、v-show 或者 v-for（即根據獲取到的后臺數(shù)據來動態(tài)操作 DOM，即響應式），那么這些 DOM 是不會在 mounted 階段找到的。

mounted 階段，一般是用于發(fā)起后端請求，獲取數(shù)據，配合路由鉤子做一些事情。簡單來說就是在 mounted 鉤子中加載數(shù)據而已，加載回來的數(shù)據是不會在這個階段更新到 DOM 中的。所以在 mounted 鉤子中使用 $refs，如果 ref 是定位在有 v-if、v-for、v-show 的 DOM 節(jié)點中，返回來的只能是 undefined，因為在 mounted 階段他們根本不存在！??！

如果說 mounted 階段是加載階段，那么 updated 階段則是完成了數(shù)據更新到 DOM 的階段(對加載回來的數(shù)據進行處理)，此時，再使用 this.$refs.xx，就 100% 能找到該 DOM 節(jié)點。

updated 與 mounted 不同的是，在每一次的 DOM 結構更新，Vue.js 都會調用一次 updated 鉤子函數(shù)！而 mounted 鉤子函數(shù)僅僅只執(zhí)行一次而已。

詳細參見文檔內容：

updated

ref