Vue学习笔记(十七)——$nextTick()的使用场景

尽管Vue不建议开发者去操作真实dom,但在实际开发中仍然会有部分操作真实dom的场景。初学者在操作真实dom的时候一定会遇到下面这样的问题:

页面使用了Vue的某个变量,希望在变量更新后立即操作变量映射的dom,但是发现查询到的dom信息是更新之前的。

解决方案:这个问题是由于更新Vue的变量后不会立即更新变量映射的dom,但是Vue提供了$nextTick()方法,我们可以把希望在真实dom更新完成后执行的动作放在$nextTick()方法里,Vue会在真实dom更新完成后自动调用。

如下例(希望在变量items更新后立即获取遍历items生成的dom数量):


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/vue">script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js">script>
head>
<body>
<div id="app">
    <div v-for="item in items" :key="item.id">
        <span class="message">{{item.message}}span>
    div>
    <button type="button" @click="setData">setDatabutton>
div>
body>
<script>
    new Vue({
        el: '#app',
        data: {
            items: []
        },
        mounted: function () {
            let that = this;
            that.setData();
            console.log("当前页面中message数量为:" + $(that.$el).find(".message").length);
            // that.$nextTick(function () {
            //     console.log("当前页面中message数量为:" + $(that.$el).find(".message").length);
            // });
        },
        methods: {
            setData: function () {
                this.items = [
                    {message: 'Foo', id: "1"},
                    {message: 'Bar', id: "2"}
                ];
            }
        }
    });
script>
html>

拿到的dom数量永远是更新前的(0):
Vue学习笔记(十七)——$nextTick()的使用场景_第1张图片

放开示例代码的注释后拿到的dom数量是更新后的(2):
Vue学习笔记(十七)——$nextTick()的使用场景_第2张图片

为什么要使用$nextTick:这是由于Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的watcher推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和dom操作。而在下一个事件循环开始时,Vue会进行必要的dom更新,并清空队列($nextTick方法就相当于在dom更新和清空队列后额外插入的执行步骤)。

你可能感兴趣的:(Vue)