vue中this.$nextTick()的相关讲解（Demo详解）

【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！

博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步!

吾等采石之人，应怀大教堂之心，愿你们奔赴在各自的热爱中…

---

一、序言

本篇一起了解一下this.$nextTick 相关方法

this.$nextTick 将回调延迟到下次DOM更新循环之后执行。

vue是异步渲染的，当data改变之后，DOM不会立刻被渲染，页面渲染时会将data的修改做整合，多次data修改只会做整合最后一次性渲染出来，这也是异步渲染的原因。只有异步渲染才可以实现整合操作。

---

二、案例

如下是亲测实践案例，初学者建议实践一波

<template>
    <div class="next-tick">
        <ul ref="ulRef">
            <li v-for="(item, index) in items" :key="index">
                {{ item }}
            </li>
        </ul>
        <button @click="add">添加</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: ['辰兮01', '辰兮02', '辰兮03'],
            };
        },
        methods: {
            add() {
                //给当前数组添加应该元素
                this.items.push('2021辰兮要努力');

                //尝试获取当前数组的长度
                const firstulElem = this.$refs.ulRef;
                const firstlength = firstulElem.childNodes.length;
                console.log('firstlength:获取当前数组的长度', firstlength);

                //用如上的方式：即使添加了获取的也是原数组的长度，用 this.$nextTick才能真正获取数组改变后的新长度
                this.$nextTick(() => {
                    // 获取子元素个数
                    const ulElem = this.$refs.ulRef;
                    const length = ulElem.childNodes.length;
                    console.log('length:获取当前数组的长度', length);
                });
            },
        },
    };
</script>

<style></style>

页面初始化状态，数组里面有三个元素，长度为3

当我们想获取数组添加一个元素后的长度，发现常见的方法在数组添加元素后，获取的还是原来数组的长度

这里我们使用this.$nextTick 即可获取当前最新数组长度

在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

下期介绍相关实践demo…

---

非常感谢你阅读到这里，如果这篇文章对你有帮助，希望能留下你的点赞👍 关注❤️ 分享👥 留言💬thanks！！！

2021年4月9日23:00:20 愿你们奔赴在自己的热爱里！