0
点赞
收藏
分享

微信扫一扫

Vue中的异步渲染DOM

哈哈镜6567 2022-10-10 阅读 80


<template>
<div>
<div ref="message">{{message}}</div>
<button @click="fn">点击</button>
</div>
</template>

  • 上面的答案是​​123​​ ,原因此时还没有将数据的更改,重新更新到DOM中。
  • Vue这样做的好处是,最终一次性更新DOM,避免重复操作DOM,耗费性能。

使用vue中的nextTick可以获取更新DOM后的操作

<template>
<div>
<div ref="message">{{message}}</div>
<button @click="fn">点击</button>
</div>
</template>

export default {
data () {
return {
message: 123
};
},
methods () {
fn () {
this.message = 456;
this.$nextTick(function(){ //或者Vue.nextTick
console.log(this.$refs.message.innerHTML); // 456


举报

相关推荐

0 条评论