关于简单的理解一下Vue.$nextTick的讲解

1.看代码

<template>
    <div class="next-tick">
        <ul>
            <li v-for="(item, index) in items" :key="index"> {{item}} </li>
        </ul>

        <button>添加</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            items: ['项目1', '项目1', '项目1',]
        }
    },
    methods: {
        addd() {
            this.items.puth(Math.random());
            
            //获取子元素的个数
            const ulElem = this.$refs.ulRef;
            const length = ulElem.childNodes.length;
            console.log("length", length);
        }
    }
}
</script>

执行后的图片 

上面的情况是什么回事呢，  这跟vue的渲染有关系, vue渲染呢它是一个异步的渲染， 也就是当我们点击添加数据的时候，vue不会马上做渲染  而是在下一个点击的时候做渲染，   在这期间我们尝试获取dom属性的时候，还是获取到的是数据改变之前的一些数值， 这就出现慢一拍的感觉。

针对上面的问题， 我们可以通过Vue.$nextTick解决

<template>
    <div class="next-tick">
        <ul>
            <li v-for="(item, index) in items" :key="index"> {{item}} </li>
        </ul>

        <button>添加</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            items: ['项目1', '项目1', '项目1',]
        }
    },
    methods: {
        addd() {
            this.items.puth(Math.random());
            
            this.$nextTick(() => {
                //获取子元素的个数
                const ulElem = this.$refs.ulRef;
                const length = ulElem.childNodes.length;
                console.log("length", length);
            })
        }
    }
}
</script>

用来this.$nextTick() 之后就不会出现慢一拍的问题了 

这是因为它在dom异步渲染完毕以后，执行this.$nextTick(() => {})箭头函数的代码     获取子元素的个数， 如果批量渲染的话this.$nextTick(() => {})也是执行一次     都是异步渲染完才执行

注意： this.$nextTick() 获取到的都是最新的dom