$nextTick在具体应用中作用

#作用

vue中的nextTick主要用户处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化。

#场景一

（1）点击按钮显示input框并且获取焦点。

<template>
  <div>
    <input type="text" v-show="isshow" >
    <button @click="onfouce">点击我显示input框并且获取焦点</button>
  </div>
</template>

<script>
export default {
    name:'demo',
    data(){
        return{
            isshow:false
        }
    },
    methods:{
        onfouce(){
            this.isshow= true
            // 这里当我点击按钮时，input不会自动的获取焦点，这是因为
            // 我们获取的dom节点时隐藏的，而this.isshow= true还没有更新到dom树上就执行以下代码
            // document.querySelector('input').focus()

            // 解决方法：$nextTick(),这个会等dom结构更新（也就是该函数执行，并且渲染完dom结构后，再次执行，这样我们得到的就是最新的（更新后）dom节点）
            this.$nextTick(()=>{
                document.querySelector('input').focus()

            })
        }
    }
}
</script>

<style>

</style>