$nextTick
<template>
<div class="app">
<div ref="msgDiv">{{ msg }}</div>
<div v-if="msg1">Message got outside $nextTick: {{ msg1 }}</div>
<div v-if="msg2">Message got inside $nextTick: {{ msg2 }}</div>
<div v-if="msg3">Message got outside $nextTick: {{ msg3 }}</div>
<button @click="changeMsg">Change the Message</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Vue.',
msg1: '',
msg2: '',
msg3: ''
};
},
methods: {
changeMsg() {
this.msg = 'Hello world.';
console.log("DOM更新中1");
this.msg1 = this.$refs.msgDiv.innerHTML;
console.log("DOM更新中2");
this.$nextTick(() => {
// 理解： 当本次DOM渲染结束后，才执行 $nextTick里面的代码
console.log("DOM更新中3 ？DOM更新结束了？");
this.msg2 = this.$refs.msgDiv.innerHTML;
});
console.log("DOM更新中4");
this.msg3 = this.$refs.msgDiv.innerHTML;
console.log("DOM更新结束了");
this.test();
},
test(){
console.log("我应该比他快吧？");
this.msg1 = "demo";
}
}
};
</script>
<style lang="scss"></style>
