Vue中的this.$nextTick()

前言

项目中，我们希望在html加载完成后获取某个元素的宽度，把获取宽度的方法写在mounted函数里，会发现很多时候会取不到正确的宽度，这是什么原因呢？
js里有个渲染线程类似于java里边的主线程，主线程按顺序执行代码，执行完才会有空去看看任务栈里边有没有任务需要执行，有的话就拿来到主线程里边执行，setTimeout就把里边的代码放到任务栈中（类似于子线程）了，所以setTimeout里边这部分代码会在主线程执行完才会执行。
而此时我们可以替换掉看起来比较low的setTimeout(fn, 0)，而是用vue里面提供的this.$nextTick()，也就好比我们将打印输出的代码放在setTimeout(fn, 0)中。

例1

nextTick1.png

可以根据打印的顺序看到，在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作并无作用，而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象

例2

nextTick2.png

根据上面的例子可以看出，在方法里直接打印的话， 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值，而通过this.$nextTick()获取到的值为dom更新之后的值