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

2020-05-25 16:03:05 阅读：204 来源： 互联网

标签：nextTick Vue dom items 更新笔记 message

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

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

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

如下例（希望在变量items更新后立即获取遍历items生成的dom数量）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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">setData</button>
</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）

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

标签：nextTick,Vue,dom,items,更新,笔记,message
来源： https://www.cnblogs.com/pwindy/p/12957367.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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