vue中的NextTick函数使用

在使用vue框架的时候，虽然它鼓励开发人员进行 “数据驱动视图” ，可有时候我们也需要直接去操作dom节点，并且vue也为我们提供了操作dom节点的方法$refs。

下面我们来看一下NextTick的作用：

在生命周期created中，dom节点尚未进行挂载，所以直接操作dom节点肯定是无效的，NextTick的作用就是等dom更新完毕之后再执行里面的代码。

NextTick的几种使用场景

1.在生命周期created中：

因为在created()钩子函数执行的时候 DOM 其实并未进行挂载，因此是无法进行DOM操作的，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。(如上例)

2.在数据变化后进行操作：

通过改变数据使某个dom节点进行改变，此时如果在代码下方需要对这个dom节点进行操作，就应当将操作的代码放入到Vue.nextTick()的回调函数中，因为Vue 异步执行 DOM 更新，例如：

    // 修改数据
    vm.msg = 'Hello'
        // 这里DOM 还没有更新
    Vue.nextTick(function() {
        // 这里DOM 更新了
    })

3.刷新一个组件