Vue - $nextTick

vue $nextTick

• Vue是异步渲染，向数组里添加一个数据，vue不会马上渲染，而是会在下一个tick，此时获取地dom还是数据渲染之前地
• $nextTick 只会回调一次
• 获取最新地dom

   <div id="app">
        <div class="next-tick">
            <button v-on:click="add">添加</button>
            <ul ref="ulRef">
                <li v-for="(item,index) in items" :key="index">
                    {{item}}
                </li>
            </ul>
        </div>
   </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
           items: ['项目已1','项目已2']
        },
        methods: {
            add(){
                this.items.push(Math.random())
                this.items.push(Math.random())
                this.items.push(Math.random())

                // 需要跟随数据变化的需要放在nextTick才能保证及时性

                // 获取子元素的个数
                // const ulElem = this.$refs.ulRef
                // const length = ulElem.childNodes.length
                // console.log('length',length)
                // console.log('length',ulElem.innerHTML)

                // 异步调用才能实现批量渲染地效果，
                // push三次nextTick的回调只会使用一次
                // this.$nextTick(()=>{
                //     const ulElem = this.$refs.ulRef
                //     const length = ulElem.childNodes.length
                //     console.log('length',length)
                // })
            }
        },
     }) 
</script>
</html>