this.$nextTick作用
理解:this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新.
例子:
<template>
<section>
<h1 ref="hello">{{ value }}</h1>
<el-button type="danger" @click="get">点击</el-button>
</section>
</template>
<script>
export default {
data() {
return {
value: 'Hello World ~'
};
},
methods: {
get() {
this.value = '你好啊';
console.log(this.$refs['hello'].innerText); //hello word
this.$nextTick(() => {
console.log(this.$refs['hello'].innerText); //你好啊
});
}
},
mounted() {
},
created() {
}
}
</script>
输出结果:
从这里看出dom里没有更新数据时,输出的是hello word ,通过this.$nextTick() 之后得到的是 你好啊