在mounted(){}鈎子里面使用this.$refs.xxx,打印出來的卻是undefined?
DOM結構已經渲染出來了,但是如果在DOM結構中的某個DOM節點使用了v-if、v-show或者v-for(即根據獲得的后台數據來動態操作DOM,即響應式),那么這些DOM是不會再mounted階段找到的。
所以如果在mounted鈎子中使用$refs,如果ref是定位在有v-if、v-for、v-show中的DOM節點,這些判斷下的DOM還沒渲染,返回來的只能是undefined,因為在mounted階段他們根本不存在!
如果說mounted階段是加載階段,那么updated階段則是完成了數據更新到DOM的階段(對加載回來的數據進行處理),此時,ref、數據等等全部都掛載到DOM結構上去,在update階段使用this.$refs.xxx,就100%能找到該DOM節點。
updated與mounted不同的是,在每一次的DOM結構更新,vue都會調用一次updated(){}鈎子函數!而mounted僅僅渲染完成時只執行一次而已。
簡單來說,只要在調試的時候,能看到元素的存在,在updated生命周期里可以使用this.$refs.xxx找到對應的DOM節點!