最近在做項目的時候用到了this.$refs.xxx，但是結果卻顯示的是undefined，找了好久的原因發現是因為v-if的問題
原因：
如果在 DOM 結構中的某個 DOM 節點使用了 v-if、v-show 或者 v-for（即根據獲取到的后台數據來動態操作 DOM，即響應式），那么這些 DOM 是不會在 mounted 階段找到的。
mounted 階段，一般是用於發起后端請求，獲取數據，配合路由鈎子做一些事情。簡單來說就是在 mounted 鈎子中加載數據而已，加載回來的數據是不會在這個階段更新到 DOM 中的。所以在 mounted 鈎子中使用 $refs，如果 ref 是定位在有 v-if、v-for、v-show 的 DOM 節點中，返回來的只能是 undefined，因為在 mounted 階段他們根本不存在。
如果說 mounted 階段是加載階段，那么 updated 階段則是完成了數據更新到 DOM 的階段(對加載回來的數據進行處理)，此時，再使用 this.$refs.xx，就 100% 能找到該 DOM 節點。
但是我是在父組件中加載的子組件，子組件的數據在父組件中更新展示，所以我用了watch監聽：
光監聽還是不夠的，還是顯示undefined,
Vue 實現響應式並不是數據發生變化之后 DOM 立即變化，而是按一定的策略進行 DOM 的更新。
$nextTick 是在下次 DOM 更新循環結束之后執行延遲回調，在修改數據之后使用 $nextTick，則可以在回調中獲取更新后的 DOM。
所以用了this.$nextTick,然后結果顯示成功了。