清空div中的内容而不刷新整个页面_Vue中的$nextTick机制-CSDN博客

nextTick 出现的前提

因为Vue是异步驱动视图更新数据的，即当我们在事件中修改数据时，视图并不会即时的更新，而是等在同一事件循环的所有数据变化完成后，再进行视图更新。类似于Event Loop事件循环机制。

官方介绍

首先我们看下官网给出的介绍:

Vue.nextTick([callback, context])

参数:

❝ {Function} [callback] {Object} [context]
❞

用法: 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后DOM。

// 修改数据
vm.msg = 'Hello'
// 当我们在这里调用DOM的数据时，它其实还没有更新
Vue.nextTick(function () {
    // DOM 更新了
})

// 2.1.0新增 Promise用法
Vue.nextTick()
    .then(function () {
    // 此时DOM已经更新
})

❝ 2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。
❞

DOM更新循环

首先，Vue实现响应式并不是在数据改变后就立即更新DOM，而是在一次事件循环的所有数据变化后再异步执行DOM更新.

有关异步以及事件循环，可以看下我之前写过的一篇关于文章JS中的异步

如果不想去详细了解，这边我就简单总结一下事件循环:

同步代码的执行 => 查找异步队列，进入执行栈，执行Callback1[事件循环1] => 查找异步队列，进入执行栈，执行Callback2[事件循环2] => .....

❝ 即每个异步的Callback都会再独立形成一次事件循环所以我们可以退出nextTick的触发时机一次事件循环中的代码执行完毕 => DOM更新 => 触发nextTick的回调 => 进入下一循环
❞

可能只凭一些概念性的讲解还是无法对nextTick机制有很清晰的了解，还是上个示例来了解一下吧。

<template>
 <div class="app">
        <div ref="contentDiv">{
    {content}}</div>
        <div>在nextTick执行前获取内容:{