Vue高级特性之$nextTick()

Vue高级特性之$nextTick()

对于 $nextTick 这一高级特性，对使用 Vue 的开发者来说是必须要知道的。这里我们将先通过一个小例子来体会一下为什么要有这个生命周期？还有它怎么用？

案例

App.vue

在这个视图组件中：

• 我们使用列表渲染了三条数据，数据来自 list
• 每一次点击按钮 button 时给 list 中添加三条数据
• 在点击按钮 list 中添加数据后我们立刻打印出视图中的 li 个数

结果如下

从这里我们看到：

• 第一次打印出 3 ，但是此时页面上有 6 条数据，所以我们期望得到的打印是 6
• 也就是说，我们每次得到的打印结果都是在视图更新之前打印的，所以没有得到预期的结果

原理
当每次点击按钮以此添加三条数据时，Vue 会先更新虚拟 DOM，然后一次性的将本次新添加的三条数据更新到 DOM 上，这个操作其实是异步的，所以我们在更新数据后获取 DOM 节点的个数时没有取得期望的打印。

这个时候，我们就会使用到生命周期 $nextTick() ，该函数会在真实的 DOM 更新后自动调用，也就是说：在修改数据之后立即使用它，然后等待 DOM 更新。

演示

我们只对 addItem 函数进行修改：

得到的结果为：

我们可以看到这个时候就可以得到我们预想的结果啦。

实际开发中的使用场景

我们在执行一些异步操作，比如网络请求的时候，当我们要根据网络请求的一些数据来动态的条件渲染一些数据的时候，我们就必须用到 $nextTick() 这个函数。

下面为我们不使用该声明周期的代码：

执行结果如下：

可以看到直接报错说：undefined 没有属性 innerHTML ，这是因为在我们网络请求获取数据时，这一操作是异步的，此时，DOM 中的没有条件渲染的标签 <div ref="uername" v-if="item.name">{{ item.name }}</div> ，所以在此时访问 this.$refs.username 时得到的其实是 undefined ，所以会得到这样的报错内容。

所以，我们就会想到，如果我们可以等到条件渲染的这一标签已经渲染出来再获取内容就可以取得目的。因此，我们需要使用 this.$nextTick() ，代码如下：

因为这里我们获取到的 this.$refs.username 经过列表渲染后为一个数组，所以如果我们访问数组中第一个元素的 innerHTML，得到的结果就为张三：