简单易懂的this.$nextTick

谁借莪１个温暖的怀抱￠ 2022-10-08 11:12 177阅读 0赞

先解释下：

vue中的nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化

<template>
       <div class="next-click">
            <ul ref="ulRef">
                 <li v-for="(item,index) in items" :key="index">
                      {
       {item}}
                 </li>
            </ul>
             <button @click="add"></button>
      </div>
    </template>
    
    <script>
        export default{
            data(){
                   return {
                     items:['项目1','项目2','项目3']
                    }
            },
            methods:{
               add(){
                       this.items.push(Math.random());
                   
                            const elElem = this.$refs.ulRef;
                            const length = elElem.childNodes.length;
                            console.log('length',length)
                      
               }
            }
            
        }
    
    </script>

这样点击增加按钮的时候，打印的数组长度，永远就是比真实的少，这是为什么呢？

那是因为没有渲染完成，就打印了！！！

那么，如何解决？$nextTick就是渲染之后执行的

<template>
       <div class="next-click">
            <ul ref="ulRef">
                 <li v-for="(item,index) in items" :key="index">
                      {
       {item}}
                 </li>
            </ul>
             <button @click="add"></button>
      </div>
    </template>
    
    <script>
        export default{
            data(){
                   return {
                     items:['项目1','项目2','项目3']
                    }
            },
            methods:{
               add(){
                       this.items.push(Math.random());
                       this.$nextTick(()=> {
                            const elElem = this.$refs.ulRef;
                            const length = elElem.childNodes.length;
                            console.log('length',length)
                       })
               }
            }
            
        }
    
    </script>