Vue.nextTick的使用

Vue通过data自动渲染页面的功能非常实用,但是data更新和页面渲染并不同步
有时候我们需要在DOM更新后执行一些代码,这时候就用到了Vue.nextTick
Vue.nextTick是在下次DOM更新循环结束之后执行延迟回调

Vue.nextTick是全局调用
this.$nextTick是在实例内部调取(this指代当前实例化对象)

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var app = new Vue({
el: "#app",
data: {
message:"Hello Vue!"
},
methods: {
changeMessage:function () {
this.message="Hello World!"
}
},
watch:{
message:function(newValue,oldValue){
this.$nextTick(function(){
//需要在DOM更新后执行的代码
});
}
}
});

在上述代码中,watch是一个监听器,可以检测到data里变量值的变化
当该变量的值发生变化后,执行function中的代码(function接收两个参数,一个为该变量的旧值,一个为新值)
当数据发生变化,Vue会通过getter/setter响应式渲染数据,这时候执行nextTick延迟
等DOM渲染成功之后,就会执行function中的代码

扫一扫,请老师喝水