Vue之$nextTick

最新推荐文章于 2024-09-11 10:37:12 发布

原创最新推荐文章于 2024-09-11 10:37:12 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

你好呀Vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了Vue中的异步更新队列原理，当数据变化时，Vue不会立即更新DOM，而是等待下一事件循环tick中执行。通过$nextTick可以确保在DOM更新后执行某些操作。在实例中，由于DOM未及时更新导致的错误可通过$nextTick解决。

为了理解$nextTick的作用，先来看这样一个场景：

有一个div，默认用v-if隐藏，点击一个按钮，改变v-if的值，让它显示出来，同时拿到这个div的文本内容，代码如下：

<!-- $nextTick -->
<body>
    <div id="app">
        <div id="div" v-if="showDiv">这是div内容</div>
        <button @click="getText">获取Div内容</button>
    </div>

    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                showDiv: false
            },
            methods: {
                getText: function() {
                    this.showDiv = true;
                    var text = document.getElementById('div').innerHTML;
                    console.log(text);
                }
            }
        })
    </script>
</body>

运行这段代码，控制台会抛出一个错误
执行结果

意思是获取不到div元素。这里涉及了Vue的一个重要概念：异步更新队列。

Vue在观察到数据变化时，并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后在下一个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。如果用一个for循环来动态改变数据100次，其实它只会应用最后一次改变，如果没有这种机制，DOM就要重绘100次，这是一个很大的开销。

上述代码的执行报错，事实上，在执行this.showDiv=true时，div依然没有被创建出来，知道下一个Vue事件循环时，才开始创建，$nextTick就是用来知道什么时候DOM更新完成的，修改上述代码可完成正常操作：

<!-- $nextTick -->
<body>
    <div id="app">
        <div id="div" v-if="showDiv">这是div内容</div>
        <button @click="getText">获取Div内容</button>
    </div>

    <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = 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>

执行结果

参考

《Vue.js 实战》