$nextTick

在vue中修改数据不会导致DOM立即更新，因此修改数据后无法拿到最新的DOM，从而无法进行相应的DOM操作。
这时就需要$nextTick() 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

如果你在数据改变之后的操作跟改变之后的DOM有关，那么就应该使用Vue.nextTick()

如点击下方的小图标切换input的type类型后，获取密码框DOM并让其聚焦

image.png

下面的代码无法获取最新的DOM，所以不起作用

  methods: {
    toggleType () {
      if (this.passwordType == 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }

      this.$refs.password.focus()
      
    }
  }

修改上面的代码,将DOM操作放在$nextTick()的回调函数中，问题得到解决

       this.$nextTick(() => {
        this.$refs.password.focus()
      })