<div id="app">
<div id="div" v-if="showDiv">这是一段文本</div>
<button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
//选择元素
el: "#app",
data: {
showDiv: false
},
//通过事件触发
methods: {
getText: function() {
this.showText = true;
var text = document.getElementById('div').innerHTML;
console.log(text);
}
}
});
</script>
上面代码执行后,会抛出一个错误: cannot read property 'innerHTML' of null;这里涉及到一个重要的概念: 异步更新队列。
Vue在观察到数据变化时并不是直接更新DOM,而是开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。然后,在下一个事件循环tick中,Vue刷新队列并执行实际工作。
事实上,在执行this.showDiv = true;时,div仍然还是没有被创建出来,直到下一个Vue事件循环时,才开始创建。$nextTick就是用来知道什么时候DOM更新完成的,所以上面的示例代码需要修改为:
<div id="app">
<div id="div" v-if="showDiv">这是一段文本</div>
<button @click="getText">获取div内容</button>
</div>
<script>
var app = new Vue({
//选择元素
el: "#app",
data: {
showDiv: false
},
//通过事件触发
methods: {
getText: function() {
this.showDiv = true;
// 等待dom更新完成后执行回调
this.$nextTick(function() {
var text = document.getElementById('div').innerHTML;
console.log(text);
});
}
}
});
</script>
理论上,我们应该不用主动去操作DOM,因为Vue的核心思想就是数据驱动DOM,但在很多业务里,我们避免不了会使用一些第三方库,比如swiper等,这些机遇原生js的库都有创建和更新及销毁的完整声明周期,与Vue配合使用时,就要利用好$nextTick。
本文摘抄自书籍《Vue.js实战》