前端面试VUE生命周期updated什么地方使用

今天发现页面加载完只有焦点死活不显示，开始各种找vue生命周期中的钩子来实现这个功能。


应用场景：

终于在updated中实现了页面加载完就可以执行DOM操作，然后又发现uodated中每次跳转组件刷新数据后都会执行一次DOM操作命令，随后又加了一层判断，判断焦点是否在这个组件，如果不在就不执行，完美解决焦点问题。

总结：可以做数据更新后获取焦点，也可以获取dom的动态属性，更改数据时对dom进行操作。

代码：

let App={
      template:`
        <div>
            {{name}} <button type="button" @click="name='李四'">改名</button>
            <div v-if="isShow">
                <input type="text" ref="username" placeholder="请输入用户名" />
            </div>
            <button type="button" @click="showInput()">显示Input</button>
        </div>
      `,
        data(){
          return {
              name:"张三",
              isShow:false
          }
        },
        //数据更新之后
        //应用场景：可以做数据更新后获取焦点，也可以获取dom的动态属性，更改数据时对dom进行操作。
        updated(){
          console.log("updated");
          console.log(this.$refs['username'].getAttribute("type"));
          this.$refs['username'].focus();
        },
        methods:{
            showInput(){
                this.isShow=true;
            }
        }

    };
    new Vue({
        el:"#app",
        template:`
                <App></App>
        `,
        components:{
            App
        }
    })