Vue – this.$nextTick() 的应用

简介

在某些情况下，我们需要对 DOM 进行操作，我们可知，Vue 提供了 $refs 的属情，用于存放 DOM 供用户自由操作，而无需安装 jQuery 或直接使用 document 方式直接操作 DOM.

但根据 Vue 的运行原理可知，Vue 在发现元素发生改变时，会实时重新渲染页面 DOM ,但有时我们需要在 DOM 元素出现时，需要对元素进行属性的加工，但此时的加工操作极有可能不会生效，而 this.$nextTick() 方法的作用则是 Vue 帮助专用于在页面重新渲染完成后进行属性加工的问题。

案例

对切换显示的 input 输入框进行焦点处理问题

在模板中加入一个输入框和一个按钮，需求是当按下按钮时，按钮消失，输入框出现。

通过设置 inputVisible 属性来控制

让文本框自动获得焦点

当文本框展示出来之后，如果希望它立即获得焦点，则可以为其添加 ref 引用，并调用原生DOM 对象的 .focus() 方法即可。

但此时会发现，showInput() 方法中的 this.$refs.ipt.focus()  执行会出错，且输入框也并示进行焦点显示。

原因是，当 showInput() 方法还在执行时，页面上的 DOM 并未进行渲染，导致在执行this.$refs.ipt.focus()时页面上还不存在 input 输入框元素，此时调用this.$refs.ipt.focus() 会出现找不到元素的错误。

使用 this.nextTick( cb )

通过上述案例问题可知，我们需要一项能在 DOM 元素渲染完成后才进行操作的功能，而 this.nextTick() 则能处理这样的问题。

this.nextTick( cb ) 原理是一个回调函数，cb 是回调函数体，当执行 this.nextTick 后，Vue 会在页面渲染完后，会进行回调执行 cb 内容，完成实现 DOM 元素的加工操作。

this.nextTick(
  ()=>{
     ...
   }
)

为什么不能使用 updated

1. updated 是公共生命周期回调函数，如果把 this.$refs.ipt.focus() 执行放在 updated 的话，当任一元素出现改动时，都会被执行，将会出现错误情执行。

2.当 input 元素被关闭时，再次执行this.$refs.ipt.focus() 依然会出现找不到元素错误。