Vue.js--$nextTick

最新推荐文章于 2024-03-02 20:57:01 发布

吴声子夜歌

最新推荐文章于 2024-03-02 20:57:01 发布

阅读量741

点赞数 5

分类专栏： Vue.js 文章标签： Vue.js nextTick

本文链接：https://blog.csdn.net/cold___play/article/details/102564552

版权

Vue.js 专栏收录该内容

39 篇文章 4 订阅

订阅专栏

$nextTick

假设如下场景：有一个div，默认用v-if将它隐藏，点击一个按钮后，改变v-if的值，让它显示出来，同时拿到这个div的文本内容。如果v-if的值是false，直接去获取div的内容是获取不到的，因为此时div还没有被创建出阿里，那么应该在点击按钮后，改变v-if的值为true，div才会被创建，此时再去获取。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>$nextTick</title>
</head>
<body>
    <div id="app">
        <div id="div" v-if="showDiv">这是一段文本</div>
        <button @click="getText">获取div内容</button>
    </div>
    <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>
</html>

运行后会抛出一个错误：Cannot read property “innerHTML” of null，意思就是获取不到div元素。这里涉及Vue一个重要的概念：异步更新队列。

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

Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver，如果都不支持，就会采用setTimeout代替。

事实上，在执行this.showDiv = true；时，div仍然还是没有被创建出来，直到下一个Vue事件循环时，才开始创建。 $nextTick就是用来指导什么时候DOM更新完成的，所以上面的示例需要改写为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>$nextTick</title>
</head>
<body>
    <div id="app">
        <div id="div" v-if="showDiv">这是一段文本</div>
        <button @click="getText">获取div内容</button>
    </div>
    <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>
</html>

吴声子夜歌

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue.js--$nextTick

$nextTick假设如下场景：有一个div，默认用v-if将它隐藏，点击一个按钮后，改变v-if的值，让它显示出来，同时拿到这个div的文本内容。如果v-if的值是false，直接去获取div的内容是获取不到的，因为此时div还没有被创建出阿里，那么应该在点击按钮后，改变v-if的值为true，div才会被创建，此时再去获取。<!DOCTYPE html><html la...
复制链接

扫一扫