$nextTick()

vue不是数据发生改变之后DOM立即发生改变，而是按一定的策略进行DOM更新
$nextTick()是在下次DOM更新之后，执行延迟回调， 在修改数据之后使用$nextTick,则可以在回调中获得更新的DOM
Vue模板中直接在根元素中进行插值，然后在实例方法中使用了this.$el.textContent来获得更新之后的DOM

new Vue({
  // …
  methods: {
    // …
    example: function () {
      // modify data
      this.message = 'changed'
      // DOM is not updated yet
      this.$nextTick(function () {
        // DOM is now updated
        // `this` is bound to the current instance
        this.doSomethingElse()
      })
    }
  }
})

例子：

<div id="app">
            <div ref="msgDiv">{{msg}}</div>
            <div>msg1:{{msg1}}</div>
            <div>msg2:{{msg2}}</div>
            <div>msg3:{{msg3}}</div>
            <button @click="showMsg">button</button>
        </div>

new Vue({
    el:'#app',
        data:{
            msg:'test',
            msg1:'',
            msg2:'',
            msg3:''
        },
        methods:{
            showMsg(){
                this.msg='你好'
                this.msg1=this.$refs.msgDiv.innerHTML
                this.$nextTick(()=>{
                    this.msg2 = this.$refs.msgDiv.innerHTML
                })
                this.msg3 = this.$refs.msgDiv.innerHTML
            }
        }
    })

还有一种场景，你有一个jQuery插件，希望在DOM元素中某些属性发生变化后重新使用该插件，这时候就需要在$nextTick的回调函数中执行重应用插件的方法

来自为知笔记(Wiz)