在vue中修改數(shù)據(jù)不會(huì)導(dǎo)致DOM立即更新，因此修改數(shù)據(jù)后無法拿到最新的DOM，從而無法進(jìn)行相應(yīng)的DOM操作。
這時(shí)就需要$nextTick() 在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 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()
      })