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的回调函数中执行重应用插件的方法