Vue---$nextTick(() =＞ {})

àì夳堔傛蜴生んèń 2022-12-14 03:50 185阅读 0赞

**$nextTick API：**

Dom更新完成后的钩子函数。

**使用场景举例：**

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

<template>
        <div class="user">
            <div id="div" v-if="showDiv">
                数据
            </div>
            <el-button @click="getData">getData</el-button>
        </div>
    </template>
    
    <script>
    export default {
        name : 'Test',
        data(){
            return {
                showDiv : false
            }
        },
        methods : {
            getData(){
                this.showDiv = true;
                var text = document.getElementById("div").innerHTML;
                console.log(text);
            }
        }
    }
    </script>

上面这段代码运行后在控制台会抛出一个错误：Cannot read property 'innnerHTML of null，意思就是获取不到div元素。这里就涉及Vue一个重要的概念：异步更新队列。

Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一个事件循环中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在下一个事件循环tick中，Vue刷新队列并执行实际（已去重的）工作。知道了Vue异步更新DOM的原理，上面示例的报错也就不难理解了。事实上，在执行this.showDiv = true时，div仍然还是没有被创建出来，直到下一个vue事件循环时，才开始创建。$nextTick就是用来知道什么时候DOM更新完成的，所以上面的示例代码需要修改为：

<template>
        <div class="user">
            <div id="div" v-if="showDiv">
                数据
            </div>
            <el-button @click="getData">getData</el-button>
        </div>
    </template>
    
    <script>
    export default {
        name : 'Test',
        data(){
            return {
                showDiv : false
            }
        },
        methods : {
            getData(){
                this.showDiv = true;
                this.$nextTick(() => {
                    var text = document.getElementById("div").innerHTML;
                    console.log(text);
                });
            }
        }
    }
    </script>

Vue---$nextTick(() =＞ {})

发表评论取消回复

还没有评论，来说两句吧...

相关阅读