[JavaScript知识库]Vue中得 $nextTick使用方式

vue本身推荐不修改DOM,但是在某些特殊情况下需要得到更新后得数据则需要使用$nextTick

vue更新DOM是异步任务

等DOM更新后,触发此方法函数体执行

this.$nextTick 返回得是一个promise对象

语法:? this.$nextTick(()=>{

})

例子:

<template>
  <div>
      <input type="text" v-if="isShow" ref="i">
      <button v-else @click="btn">点我得永生</button>
  </div>
</template>

<script>
export default {
  data(){
      return{
          isShow:false
      }
  },
  methods:{
      btn(){
          this.isShow=true
          //因为是异步任务.如果需要立刻获取到结果就使用next方法
          this.$nextTick(()=>{
              this.$refs.i.focus()
          })
      }
  }
}
</script>

<style>

</style>

通过生命周期函数 updated 也可以拿到DOM更新后得数据