Vue基础知识——$nextTicks/$refs

需求：需要在DOM渲染后基于最新的DOM进行操作的场景。

相关示例代码解析：

在标签上定义ref="ul"，就能够通过this.$refs获取到此DOM进行相关操作。以下代码中对ul列表对应的数据进行push操作，li的数量由3个变成4个。下一行代码如果直接获取的话li的数量还是3个。需要使用$nextTicks获取才能到有4个li标签的DOM。

<template>
    <div class="demo">
        <ul ref="ul">
            <li v-for="(item,index) in list" :key="index">
                {{item}}
            </li>
        </ul>
        <button @click="addItem">添加</button>
    </div>
</template>
<script>
export default {
    name: 'demoVue',
    data() {
        return {
            list:[
                'a','b','c'
            ]
        }
    },
    methods: {
        addItem() {
            this.list.push("1111")
            // console.log(this.list.length)
            console.log('1',this.$refs['ul'].childNodes.length)
            alert("break")
            this.$nextTick(()=>{
                console.log('2',this.$refs['ul'].childNodes.length)
            })
            console.log('3',this.$refs['ul'].childNodes.length)
        }
    }
}
</script>
<style>

</style>