在vue中修改數(shù)據(jù)不會導(dǎo)致DOM立即更新棋弥，因此修改數(shù)據(jù)后無法拿到最新的DOM恐锦，從而無法進(jìn)行相應(yīng)的DOM操作头镊。
這時就需要$nextTick() 在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)毛好。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM躏救。
如果你在數(shù)據(jù)改變之后的操作跟改變之后的DOM有關(guān)唯笙，那么就應(yīng)該使用Vue.nextTick()
如點(diǎn)擊下方的小圖標(biāo)切換input的type類型后，獲取密碼框DOM并讓其聚焦
image.png
下面的代碼無法獲取最新的DOM，所以不起作用
methods: {
toggleType () {
if (this.passwordType == 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
this.$refs.password.focus()
}
}
修改上面的代碼,將DOM操作放在$nextTick()的回調(diào)函數(shù)中崩掘，問題得到解決
this.$nextTick(() => {
this.$refs.password.focus()
})
