$nextTick —— vue中实现请求数据后渲染dom

最新推荐文章于 2024-04-26 17:54:13 发布

提莫拌一团蘑菇

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量1.2k

点赞数 1

分类专栏： Vue 深入浅出文章标签： vue.js es6 javascript html node.js

原文链接：https://blog.csdn.net/xiongdaandxiaomi/article/details/89675286

版权

Vue 深入浅出专栏收录该内容

13 篇文章 0 订阅

订阅专栏

我们先看下面代码示例效果：

（1）示例

<body>
    <div id="app" >
        <div id='div' v-if="showDiv">这是一段文本</div>
        <button @click="getText">获取div内容</button>
    </div>
</body>    
<script >
var app = new Vue({
    el:'#app',
    data : {
        showDiv: false,
    },
    
    methods: {
        getText(){
            this.showDiv = true;
            var text = document.getElementById('div').innerHTML;
            console.log(text)
        }
    }

})
</script>

（2）页面效果

我们看到在控制台会抛出一个错误，意思是获取不到div元素。这是涉及到一个概念：异步更新队列。
说明：Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后在下一个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。所以你用一个for循环来动态改变数据100次，其实它只会应用最后一个改变，如果没有这种机制，DOM就要重绘100次，这是一个很大的开销。
在执行this.showDiv = true;时，div仍然还没有被创建出来，直到下一个Vue事件循环时，才开始创建。$nextTick 就是用来直到什么时候DOM更新完成。

方法修改为：

getText(){
    this.showDiv = true;
    this.$nextTick(function () {
        var text = document.getElementById('div').innerHTML;
        console.log(text)
    })
    
}

（3）小结

理论上我们不应该主动操作DOM，因为Vue的核心思想就是数据驱动DOM，但是在很多业务中我们避免不了会使用第三方库，比如popper.js、swiper等，这些基于原生JavaScript的库都有创建和更新及销毁的完整生命周期，与Vue配合使用时，就要利用好$nextTick.

提莫拌一团蘑菇

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
$nextTick —— vue中实现请求数据后渲染dom

我们先看下面代码示例效果1）示例<body> <div id="app" > <div id='div' v-if="showDiv">这是一段文本</div> <button @click="getText">获取div内容</button> </div>...
复制链接

扫一扫