Vue响应式并不是数据发生改变后DOM 立即发生改变,而是按一定的策略进行 DOM 的更新,所有当我们改变数据时,立即对改变的DOM处理时就会出错,最明显的就是使用v-if或v-for的时候,针对这种改变数据要对DOM操作,Vue.nextTick起了重要作用
<!DOCTYPE html>
<html>
<body>
<div id="app">
<p ref="myWidth" v-if="showMe">{{ message }}</p>
<button @click="getMyWidth">获取p元素宽度</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
/*定义vue实例app2*/
var app2 = new Vue({
el: '#app2',
data: {
message: '你好!我时nextTick'
},
methods: {
getMyWidth() {
this.showMe = true;
//this.message = this.$refs.myWidth.offsetWidth;
//报错 TypeError: this.$refs.myWidth is undefined
this.$nextTick(()=>{
//dom元素更新后执行,此时能拿到p元素的属性
this.message = this.$refs.myWidth.offsetWidth;
})
}
}
});
</script>
</html>