使用this.$nextTick()获取不到数据更新后的this.$refs.xxx.及场景分析

  
<!--这是模板代码，父级用的v-else-if，与父级同级的还有两个盒子，分别用v-if和v-else控制着-->
<div ref="articleContent" class="right" v-html="articles.content"></div>
 
 
 
//这是script代码
 
 mounted() {
    
        this.getArticlesDetail()
    
  },
  methods: {
   async getArticlesDetail(){
        try {
            
            const {data}= await getArticlesDetail(this.articleId);
            /* vue数据更新是异步的 ,在这一步数据加载出来，但是组件还没没有渲染出来，因为在组件中有个v-if判断，在数据加载出来之后，才能渲染出来组件*/
            /* console.log(this.$refs.articleContent) */
            /* 所以要放在定时器是异步执行，试了用this.$nextTick，不行 */
          /*  */
            this.articles = data
            /* 只能用setitmeout是因为数据在在下个Event Loop中也出不来，这是因为v-if中的条件在下次事件循环中也不一定能够满足。但是setTimeout的执行时机是没有办法确定前边的任务到底需要多长时间执行完 */
              this.$nextTick(() => {
                console.log(this.$refs.articleContent)
            });
            console.log(data)
        } catch (error) {
            if(error.response && error.response.status===404){
                this.errStatus=404;
                this.$toast('服务器错误')
            }
            console.log(error)
            this.$toast('请求失败，请稍后再试')
        }
        /* 无论成功失败都要调用loading为false，关闭它 */
        this.loading=false
    }
  },

  
<!--这是模板代码，父级用的v-else-if，与父级同级的还有两个盒子，分别用v-if和v-else控制着-->
<div ref="articleContent" class="right" v-html="articles.content"></div>
 
 
 
//这是script代码
 
 mounted() {
    
        this.getArticlesDetail()
    
  },
  methods: {
   async getArticlesDetail(){
        try {
            
            const {data}= await getArticlesDetail(this.articleId);
            /* vue数据更新是异步的 ,在这一步数据加载出来，但是组件还没没有渲染出来，因为在组件中有个v-if判断，在数据加载出来之后，才能渲染出来组件*/
            /* console.log(this.$refs.articleContent) */
            /* 所以要放在定时器是异步执行，试了用this.$nextTick，不行 */
          /*  */
            this.articles = data
            /* 只能用setitmeout是因为数据在在下个Event Loop中也出不来，这是因为v-if中的条件在下次事件循环中也不一定能够满足。但是setTimeout的执行时机是没有办法确定前边的任务到底需要多长时间执行完 */
              setTimeout(() => {
                console.log(this.$refs.articleContent)
            });
            console.log(data)
        } catch (error) {
            if(error.response && error.response.status===404){
                this.errStatus=404;
                this.$toast('服务器错误')
            }
            console.log(error)
            this.$toast('请求失败，请稍后再试')
        }
        /* 无论成功失败都要调用loading为false，关闭它 */
        this.loading=false
    }
  },

<template>
  <div>
      <input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow">
      <button v-else @click="btn">点击我进行搜索</button>
  </div>
</template>
 
<script>
 
// 获取到输入框
// 输入框调用事件方法focus()达到聚焦行为
export default {
    data(){
        return {
            isShow: false
        }
    },
    methods: {
        btn(){
            this.isShow = true;
 
            this.$refs.myInp.focus(); // 没有效果
            
            // 原因: data变化更新DOM是异步的
            // 输入框还没有挂载到真实DOM上
            // 解决:
            // this.$nextTick(() => {
            //     this.$refs.myInp.focus()
            // })
        }
        //async btn(){  
        //    this.isShow = true;
        //    
        //    // 扩展: await取代回调函数
        //    // $nextTick()原地返回Promise对象
        //    await this.$nextTick()
        //    this.$refs.myInp.focus()
        //}
    },
     //扩展
    updated(){  
     // this.$refs.myInp.focus()
    
    }
}
</script>