Vue中$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>

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 更新后在执行
  })
}