Vue中的nextTick

<div id="app">
        <div ref='msgDiv'>{{msg}}</div>
        <div v-if='msg1'>Message get outside $nextTick: {{msg1}}</div>
        <div v-if='msg2'>Message get outside $nextTick: {{msg2}}</div>
        <div v-if='msg3'>Message get outside $nextTick: {{msg3}}</div>
        <button @click='changeMag'>
            change

        </button>
</div>

 var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello wo',
                msg1: '',
                msg2: '',
                msg3: '',

            },
            methods: {
                changeMag: function() {
                    this.msg = 'Hello I love you'
                    this.msg1 = this.$refs.msgDiv.innerHTML //hello wo
                    this.$nextTick(() => {
                        this.msg2 = this.$refs.msgDiv.innerHTML //Hello I love you  变化之后的数据
                    })
                    this.msg3 = this.$refs.msgDiv.innerHTML //hello wo
                    change
                }

            }
        })

// this.$nextTick()将回调延迟到下次DOM更新循环之后执行，在修改数据之后立即使用，然后等待DOM更新

Vue.nextTick

• 作用：用于延迟执行一段代码，接收两个参数（1.回调函数 2.执行回调函数的上下文环境）；如果没有回调函数，返回Promise对象

• 三个变量
  1）callbacks 用来存储所有需要执行的回调函数
  2）pending 用来标志是否正在执行回调函数
  3）timerFunc 用来触发执行回调函数

• 应用场景
  1.Vue声明周期的created钩子函数进行DOM操作时，一定放在Vue.nextTick的回调函数中。因为created执行的时候DOM实际上并没有进行渲染
  2.在数据变化之后要执行的操作，而这个操作需要使用随数据变化而变化的dom结构时