組件c內部的某個元素a1定義了ref=“test1”，但是在c的mounted鉤子里面卻找不到c.$refs.test1
在雖然在mounted時不存在c.$refs.test1, 但是mounted之后(應該是頁面徹底初始化完畢后)，是存在的。
因為相對這個c.$refs.test1做一些事件的系結操作，請問應該在什么時間點才能比較安全地抓到c.$refs.test1呢？
uj5u.com熱心網友回復：
你需要的就是這個結論。v-if="false" 時，DOM 節點不存在，自然獲取不到（因為這個元素壓根兒就沒渲染到 DOM 樹上去）。
v-show="false" 時，DOM 節點已被渲染，只是 display: none。
官方檔案里有描述這個區別：
cn.vuejs.org
條件渲染 — Vue.js
Vue.js - The Progressive JavaScript Framework
uj5u.com熱心網友回復：
嗯，應該就是這個結論。終于知道原因了。多謝??uj5u.com熱心網友回復：
a1的父組件c是根據某些條件而控制可見性的，c可見的話 a1就是始終可見的。uj5u.com熱心網友回復：
試了一下，在mounted之后的beforeUpdate里面是可以找到c.$refs.test1的。但是這并不是期望的結果啊。
uj5u.com熱心網友回復：
也就是說 c 不可見時 a1 也不可見，那么 mounted 觸發時 a1 可不可見呢？uj5u.com熱心網友回復：
mounted觸發時 a1也找不到。但是，打了斷點執行，發現在mounted時，是可以從c.$el.children里面找到a1的。
uj5u.com熱心網友回復：
又試了幾次，發現這樣的規律：c的可視性用v-if控制時，不可以在mounted里找到c.$refs.test1
而用v-show時，就可以了。
uj5u.com熱心網友回復：
那你應當 watch 那個 v-if 條件，結合 $nextTick() 操作 DOM。
這個思路挺好^_^
不過，有點擔心那個v-if 如果多次反復切換，會不會導致要做的處理被意外地多次執行而出什么問題（本來是想在mounted里面為那個c.$refs.test1系結onchange事件的）。 抽時間試一下。
uj5u.com熱心網友回復：
試了一下，可行了！！uj5u.com熱心網友回復：
不過，這就導致很多時候只能使用v-show而用不了v-if了。v-if='false’的時候，真希望能夠連mounted也不觸發。
uj5u.com熱心網友回復：
這個 a1 元素是始終可見的 HTML 元素嗎？如果是的話，mounted 就能獲取到了；如果不是的話，就跟 mounted 沒關系了。uj5u.com熱心網友回復：
我正在做的這個頁面里面已經有一些已經存在的其他jquery進行的處理。 而且比較麻煩的是，那個jquery會操作我的組件里面的元素（c.$refs.test1）。為了檢測到jquery的修改并反應的組件里，迫不得已有了這一系列問題。uj5u.com熱心網友回復：
事件的話，直接寫到模板上不就好了，為什么還要在方法里寫uj5u.com熱心網友回復：
并不是啊。v-if 和 v-show 最大的區別就是切換開銷不同，這是性能方面的事情。如果你的某個邏輯依賴于 v-if 控制的結果，那你應當 watch 那個 v-if 條件，結合 $nextTick() 操作 DOM。糾結于 mounted 有點偏了。uj5u.com熱心網友回復：
那還是用 v-show 吧，保證 DOM 結構的穩定uj5u.com熱心網友回復：
茅塞頓開！！！！！轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/284232.html
標籤：其他技術討論專區
上一篇：Apache POI框架使用XSSFWorkBook拋出例外
下一篇：ps錨點工具