vue的$nextTick的使用+源码分析
开始前,我觉得我们需要先弄清楚vue的$nextTick是干什么用的,它的存在是为了解决什么问题?大家也可以自问一下。
nextTick英文翻译过来“下一个记号或者标记”,我觉得这里应该用状态来描述更加合理一些。
上面,我抛了一个问题,现在来聊一聊这个问题,首先说一说nextTick的作用,这里我就直接引用官网api上的一句话,我觉得已经说的非常清楚了:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
再看一下官网的例子:
new Vue({
// ...
methods: {
// ...
example: function () {
// 修改数据
this.message = 'changed'
// DOM 还没有更新
this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
this.doSomethingElse()
})
}
}
})
上面我用了官网的例子和解释,我觉得例子还没完全说明白nextTick解决了什么样的问题,所以我觉得我需要补充一下我自己的理解。
大家都知道,在vue的created生命周期里面,如果你需要在这个生命周期钩子里面操作dom是不行的,因为这个钩子执行的时候dom并没有渲染到页面上,所以会直接报错。
这里有的同学就说,如果我必须要在这里操作dom呢?那这个时候就到了$nextTick登场的时候,根据官方的解释和例子也可以证明这一点,nextTick的参数回调函数执行的时候就是dom已经渲染到了页面,挂载好了,并且把当前this绑定到了当前的实例上面去了,这个时候就可以获取到更新后的dom元素去操作dom。
其实真正的用意,并不是为了解决这个,其实是为了解决响应式更新的问题。
我们都知道,vue是响应式的,什么是响应式?简单说,就是数据变了,视图变,视图变了,数据变。这样一来就有一个问题,不知道大家发现了没,如果没发现,我们就先看一下下面这段代码
<template>
<div>
{
{a}}
{
{b}}
{
{c}}
</div>
</template>
new Vue({