問題描述

我使用 ref 引用一個 dom 元素，並且使用變數showMap控制其渲染。我在一個函式中，將showMap設定為 true 過後，立即使用了 this.$refs.map來訪問這個domn。

當其在 v-if 的控制下渲染的時候，我的程式碼出錯，報了一個很奇怪的錯誤，我完全不知道這個堆疊資訊如何追蹤，提示的變數什麼的也找不到

我的思考

應該是我犯了原生dom渲染的錯誤思維，以為showMap設定為 true 過後，dom 會立即渲染，畢竟原生 dom 操作是同步的。
猜測 vue 這裡對showMap進行修改時，並不會直接修改 dom，而是修改虛擬 dom。
所以等待修改showMap

問題解決

當然，通用的解決方案是，在將showMap設定為 true 過後，將涉及到被showMap影響的 dom 的操作，放進一個回撥函式中，並放入 $nextTick。等待真實 dom 被更新後，這個回撥會被執行，也就不會發生未定義的錯誤了。

還有個方案是：使用 v-show 指令，通過隱藏 dom 來代替 渲染 dom，隱藏意味著其存在，只是不可見而已。