对Vue.nextTick()的一些浅薄见解

一直对nextTick不是很了解，官网的定义有些琢磨不透，先来看一下官网怎么定义nextTick的
Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
当你设置 vm.someData = ‘new value’，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

上面的看不懂?? 看下面的介绍:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
所以，简单把nextTick先理解为获取更新后的dom的方法吧
nextTick()，是将回调函数延迟执行，ok ，那延迟到什么时候呢？延迟到下一次dom更新数据后调用。再通俗一些就是当你的dom更新以后，数据也变化了，这时候这个函数就会自动执行了

eg：<button id="btn" @click="clickBtn()" ref="btns">{{msg}}</button>
假定初始化 msg为 更新前的值

clickBtn() {
        this.msg = "更新后的值"
        // console.log(this.$refs.btns.innerText); // 更新前的值
        this.$nextTick(()=>{
            console.log(this.$refs.btns.innerText); //  更新后的值
        })
    },

如上例子，虽然没有使用nextTick的地方看页面视图上数据是已经变化的，但是当你打印的值 仍然还是更新前的值 所以卸载nextTick内，就可以获取到更新后的值了

ok，那什么时候需要使用this.$nextTick呢？
1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM已经挂在完成

2、当在项目中你想改变dom元素的数据后基于新的dom do SomeThing的时候，即对新dom的一系列的js操作都需要放进Vue.nextTick()的回调函数中，通俗理解是，更新数据后当你想立即使用js操作新的视图的时候你需要用在这里插入代码片到它
比如上例中 我需要对this.$refs.btns.innerText do someThing的时候，我需要使用

3、在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。