Vue $nextTick的使用~

<template>
    <div>
        <ul ref="list">
            <li v-for="item in listData" :key="item">
                {{item}}
            </li>
        </ul>
        <button @click="addItem"></button>
    </div>
</template>
export default {
    data () {
        return {
            listData: ['1','2','3']
        }
    },
    methods: {
        addItem () {
            this.listData.push('4')
            const listRef = this.$refs.list;
            // Vue页面更新是异步的 这样是获取不到更新后的那个dom
            console.log(listRef.childNodes.length)
            
           //需要使用$nextTick获取最新的dom
            this.$nextTick(()=>{
                const listRef = this.$refs.list;
                console.log(listRef.childNodes.length)
            })
        }
    }
}