Vue踩坑之路之nextTick（）函数

官方文档对异步更新队列给出如下解释

可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

 

结合测试用例更好理解

<template>
  <div>
    <p ref="p_1">{{msg}}</p>
    <button @click="fn">change</button>
  </div>
</template>


<script>
    export default {
        data() {
            return {
                msg: 1
            }
        },
        methods: {
            fn: function () {
                this.msg = 33
                console.log(this.$refs.p_1.innerHTML) //输出为1
                this.$nextTick(function () {
                        console.log(this.$refs.p_1.innerHTML) //输出为33
                    }
                )
            }
        }
    }
</script>

从官方文档解释中理解了一个大概。DOM更新操作是异步的，Vue数据驱动视图，数据发生改变后，Vue将开启一个新的队列，并在此执行所有的数据变更，这样可以避免重复的操作和避免不必要的计算。

简而言之，在改动数据时，获取Vue中dom节点不会获取到更新之后的值，可以使用nextTick(callback)，这里的回调函数将会在c页面更新之后执行。也就是说可以拿到最新的数据。

再来看一个很明显的栗子

let comp = {
            template: "<input ref='input_1' v-show='show'></input>",
            data() {
                return{
                    show:false
                }
            },
            mounted(){
                this.show=true
                let that = this
                that.$refs.input_1.focus()
            }
        }
        let vm = new Vue({
            el: '#app',
            data(){
                return{

                }
            },
        template:"<comp></comp>",
        components:{
            comp
        }
    })

这是一个很极端的栗子，但是可以很好的反应问题，如果说我们以后在Vue项目中更新了数据值，就像我上段代码中的this.show=true，改变值之后，Vue会开启一个异步更新队列，将this.show=true放在了更新队列之中，我们设置的input不是更新之后的input，如果要拿到更新之后的input，并让input获得焦点，可以用到nextTick如下所示。

            mounted(){
                this.show=true
                let that = this
                this.$nextTick(function () {
                    that.$refs.input_1.focus()
                })
            }