$nextTick是什么
概述$nextTick 是一个用于在DOM更新完成后执行回调函数的方法vue的数据更新是一种延迟异步更新在vue中修改数据后,页面不会立刻更新,而是开启一个队列,并且缓存同一轮事件循环中的所有数据改变。在缓冲时会除去重复的操作,等到下一轮事件循环时,才开始更新。此时通过DOM操作获取的数据仍然是未更新的数据$nextTick能够监听的DOM更新完成异步更新队列Vue在观察到数据变化时,并不是直接更
·
概述
$nextTick 是一个用于在DOM更新完成后执行回调函数的方法
vue的数据更新是一种延迟异步更新
在vue中修改数据后,页面不会立刻更新,而是开启一个队列,并且缓存同一轮事件循环中的所有数据改变
。在缓冲时会除去重复的操作
,等到下一轮事件循环时,才开始更新。
此时通过DOM操作获取的数据仍然是未更新的数据
$nextTick能够监听的DOM更新完成
异步更新队列
Vue在观察到数据变化时,并不是直接更新DOM,而是开启一个队列,并且缓存同一轮事件循环中的所有数据改变
。在缓冲时会除去重复的操作
,等到下一轮事件循环时,才开始更新。
应用场景
created阶段的DOM操作
使用
1.组件内通过this.$nextTick()调用
2.内部参数是一个回调函数,在DOM更新完成后执行
3.会返回一个Promise对象
4.支持async\await
<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);
this.$nextTick(() => {
console.log(this.$refs['hello'].innerText);
});
}
},
mounted() {
},
created() {
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)