Vue 组件更新之后获取最新DOM（高级）

一般

• Vue 是异步渲染
• data 改变之后，DOM 不会立刻渲染
• $nextTick 会在 DOM 渲染之后被触发，以获取最新 DOM 节点

举例说明

<template>
    <div id="app">
        <ul ref="ul1">
            <li v-for="(item, index) in list" :key="index">
                {{item}}
            </li>
        </ul>
        <button @click="addItem">添加一项</button>
    </div>
</template>
<script>
    export default {
        name: 'app',
        data() {
            return {
                list: ['a', 'b', 'c']
            }
        },
        methods: {
            addItem() {
                this.list.push(`${Date.now()}`)
                this.list.push(`${Date.now()}`)
                this.list.push(`${Date.now()}`)
                // 1. 异步渲染，$nextTick 待 DOM 渲染完再回调
                // 2. 页面渲染时会将 data 的修改做整合，多次 data 修改只会渲染一次
                // 获取 DOM 元素
                const ulElem = this.$refs.ul1
                // eslint-disable-next-line
                console.log( ulElem.childNodes.length ) // 第一次点击 3
                this.$nextTick(() => {
                    // eslint-disable-next-line
                    console.log( ulElem.childNodes.length ) // 第一次点击 6
                })
            }
        }
    }
</script>