<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结构时