• Vue $nextTick


    1、概述

    Vue在观察到数据变化时并不是立即更新DOM,而是开启一个队列,并缓冲在同一个事件循环中发生所有数据的改变。

    在缓冲时会去除重复的数据,从而避免不必要的计算和DOM操作

    在下一个事件循环的tick中,Vue刷新队列并执行实际(已去重)的工作。

    Vue是异步更新DOM(异步更新队列)

    $nextTick就是知道什么时候DOM更新完成的

    2、示例代码

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>Vue</title>
        </head>
    
        <body>
            <div id="app">
                <div id="div" v-if="showDiv">
                    这是一段文本
                </div>
                <button @click="getText()">获取div的内容</button>
            </div>
            <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
            <script type="text/javascript">
                new Vue({
                    el: "#app",
                    data: {
                        showDiv: false
                    },
                    methods: {
                        getText: function() {
                            this.showDiv = true;
                            this.$nextTick(function() {
                                var text = document.getElementById('div').innerHTML;
                                console.log(text)
                            });
    
                        }
                    }
                })
            </script>
        </body>
    
    </html>

     

  • 相关阅读:
    诸暨集训游记
    P2678 跳石头
    P1577 切绳子
    P1328 生活大爆炸版石头剪刀布
    P1067 多项式输出
    分解因数
    【管理篇】团队组织与架构演进方法论
    【状态机】行为状体机和协议状态机
    【数据库】分库分表
    【OLAP】从数仓到Kappa架构
  • 原文地址:https://www.cnblogs.com/mengfangui/p/8063864.html
Copyright © 2020-2023  润新知