企业级 Vue 开发：this.$nextTick () 的应用场景与代码案例剖析

一、文章序言

本篇一起了解一下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()的回调函数中

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