this.$nextTick实际运用

在使用element-ui  的项目中。点击+New Tag按钮时 文本输入框input 显示出来，但需要做自动聚焦 （图一到图二的效果）

图一

图二

 

 

查阅官方文档发现，在操作聚焦（this.$refs.saveTagInput.$refs.input.focus()）之前，官方使用了this.$nextTick 函数做包裹

    showInput(row) {
      row.inputVisible = true
      // 让文本框自动获得焦点
      // $nextTick方法作用,就是当页面上元素被重新渲染之后，才会执行回调中的代码
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus() //操作输入框dom元素聚焦
      })
    }

这是由于 row.inputVisible = true 执行时

这个布尔值被重置为true之后，页面还没用被重新渲染，此时页面还没有input输入框这个dom元素

当$nextTick  被调用，就证明页面已经被重新渲染了

此时再调用this.$refs.saveTagInput.$refs.input.focus()这个函数就可以了！！

 

那么问题来了，把v-if 换成v-show  是否不需要使用$nextTick 来包裹dom操作呢？？？？

 

 

我将v-if 换成v-show写法之后，去掉$nextTick包裹，再次尝试

结果是，没有聚焦

 

我们知道v-show是通过设置元素属性  display: none;来显示或隐藏元素的，也就是说

这说明了通过v-show 切换 display: none;和 display: block; 也属于对DOM的操作

因此得出结论，使用v-show的元素在做dom操作的时候，同样需要在$nextTick 函数中操作。