Vue中$nextTick的使用备忘

桃扇骨 2024-03-30 15:15 27阅读 0赞

#### 文章目录 ####

*  Vue中$nextTick的使用备忘
 *   *  1. 演示小示例
     *   *  1-1 父组件
         *  1-2 子组件
         *  1-3 报错的原因
     *  2 示例问题解决：使用setTimeout 或 $nextTick(function()\{...\})
     *   *  2-1 使用setTimeout \[延迟触发，不够专业\]
         *  2-2 $nextTick 【推荐使用】
     *  3. Vue.nextTick和this.$nextTick差别
     *  4. 使用 nextTick的一个小技巧

## Vue中$nextTick的使用备忘 ##

### 1. 演示小示例 ###

***测试效果： 页面渲染完成后展示一个div元素；  
当点击这个div元素后；div元素消失，出现一个input元素；  
并且input元素聚焦***

#### 1-1 父组件 ####

<template>
      <div>
        <next-tick></next-tick>
      </div>
    </template>
    
    <script lang="ts">
    import NextTick from "../components/NextTick.vue"
    export default {
        
      name:"About",
      components:{
        
        NextTick
      },
    }
    </script>

#### 1-2 子组件 ####

<template>
        <div>
            <div>我是组件</div>
            <div v-if="flag" class="sun" @click="handerClick">显示input</div>
            <input v-else ref="inputRef" class="yuelaing"/>
        </div>
    </template>
    <script>
    export default {
        
        data(){
        
            return{
        
                flag:true,
            }
        },
        methods: {
        
            handerClick(){
        
                this.flag=false;
                this.$refs.inputRef.focus();
            },
        },
    }
    </script>

![在这里插入图片描述][b53538ddceb544e09b8b87f643d674d5.gif_pic_center]

#### 1-3 报错的原因 ####

***当执行页面操作的时候，  
this.$refs.inputRef.focus();  
是需要消耗时间的 ( 还没有还得及刷新；还是旧的页面 )  
此时还没有获取到dom元素。  
所以就出现报错undefined***

### 2 示例问题解决：使用setTimeout 或 $nextTick(function()\{…\}) ###

#### 2-1 使用setTimeout \[延迟触发，不够专业\] ####

// 延迟100ms触发，可以解决，但这种方式终究感觉不够好
    setTimeout(()=>{
        
          this.$refs.inputRef.focus();
    },100)

#### 2-2 $nextTick 【推荐使用】 ####

// 当组件根据最新的data数据，重新在视图上完成渲染后，执行里面的函调函数
    this.$nextTick(()=>{
        
        this.$refs.inputRef.focus();
    })

### 3. Vue.nextTick和this.$nextTick差别 ###

1. Vue.nextTick是全局方法
    2. this.$nextTick( [callback] ) 是实例方法。
    
    我们知道一个页面可以有多个Vc实例，
    this.$nextTick可以精确到某个实例上， 本质上两个是一样的。
    一个是全局，一个是精确到某一个实例

### 4. 使用 nextTick的一个小技巧 ###

// 我们知道在生命周期mounted渲染的时候，
    //		不能百分百保证所有的子组件都能够被渲染，
    //		因此我们可以在mounted里面使用 this.$nextTick，
    //		这样就能保证所有的子组件都能被渲染到。
    //		mounted钩子在服务器端渲染期间不被调用。
    
    mounted: function () {
        
      this.$nextTick(function () {
        
        //在数据发生变化，
        //重新在视图上完成渲染后，在执行里面的方法
        //这一句话等同与：
       //将回调延迟到下次 DOM 更新循环之后执行
       //等同于:在修改数据之后,然后等待 DOM 更新后在执行
      })
    }

[b53538ddceb544e09b8b87f643d674d5.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/d15349938ff24a6c8f62ae56e548d1ce.gif