DOM的改变,会触发事件。事件是同步执行的。
数据的更新,不会立刻触发视图的更新。在Vue中,DOM的变动是异步的。
如果想要得到数据更新后的dom对象,并执行操作。初始化时可以写在mounted中,此外可以写在nextTick这个api中。
Vue.nextTick(callback,执行上下文环境的this) --接收两个参数
Vue.nextTick里面有三个重要变量:callback(回调) pending(是否正在执行回调) timefunc(触发回调的函数)
<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>
<script>
new Vue({
el: '.app',
data: {
msg: 'Hello Vue.',
msg1: '',
msg2: '',
msg3: ''
},
methods: {
changeMsg() {
this.msg = "Hello word."
this.msg1 = this.$refs.msgDiv.innerHTML
this.$nextTick(() => {
this.msg2 = this.$refs.msgDiv.innerHTML
})
this.msg3 = this.$refs.msgDiv.innerHTML
}
}
网友评论