大学生学习之Vue2.0的异步队列更新

今天也在努力学

已于 2022-06-09 12:36:47 修改

阅读量320

点赞数

分类专栏： JS 文章标签：学习 javascript 前端

于 2022-06-08 12:59:23 首次发布

本文链接：https://blog.youkuaiyun.com/m0_62927182/article/details/125182324

版权

本文探讨了Vue2.0中的异步更新队列如何影响DOM渲染，解释了为何数据更新后DOM不会立即更新。通过虚拟DOM的异步操作，Vue提升了页面渲染效率。当需要立即获取更新后的DOM时，可以利用Vue提供的函数监听异步更新队列完成。同时，也讨论了在组件外部如何进行数据更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在JavaScript中就存在异步队列，所以可想而知，Vue中也会有异步更新

在下述代码中 log出来的内容可能和你预期的有所差距

数据在更新之后，DOM不会立马进行更新渲染

把多个数据更新的操作放在一个事件循环里面，在一个事件循环之后统一更新操作，进而提升页面渲染的效率

<body>
    <div id="app">
        <h1 ref="header">
            {
  {title}}
        </h1>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: "故乡的樱花开了"
        },
        mounted() {
            this.title = "你确定不来看看？"
            var header = this.$refs.header
            console.log(1, this.title, header.innerText);
            this.title = "你不回来看看？"
            console.log(2, this.title, header.innerText);
        },
    })
</script