VUE学习之------Vue.nextTick

在项目中最近遇到一种情况： 在一个页面中点击快捷键会调出另一个页面，这个页面一个元素是输入框，一个元素是button。刚调出这个页面的时候焦点要在输入框中，这样用户就可以直接进行输入了。

从这个需求来看，点击快捷键的时候用v-show = true 来进行显示，然后把焦点focus到输入框上，但一直给输入框加不上焦点。

之前从网上搜索了一下用Vue.nextTick来进行上焦点，但没有成功。另外同事最后也是用Vue.nextTick解决了，比较郁闷。

对Vue.nextTick还是没有理解原理。

Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。所以说v-show设置为true后立马上焦点会存在拿不到dom，也就不能进行上焦点了。

Vue.nextTick中的函数是在更新完dom后再执行，所以就解决了此问题。看下面的例子：

.styleChange{
    width: 200px;
}
.ccBtn{
    margin-top: 20px;
    margin-left: 50px;
}

<div id="simple">
    <input id="ccId"  class="styleChange" v-show="isShow">
    <button class="ccBtn" @click="handleClick">show Input box</button>
</div>

var vm = new Vue({
    el:"#simple",
    data:{
        isShow: false
    },
    methods:{
        handleClick:function () {
            this.isShow = true;
            document.getElementById("ccId").style.height = "100px";
            document.getElementById("ccId").focus();
            // Vue.nextTick(function () {
            //     document.getElementById("ccId").focus();
            // });
        }
    }
});

把document.getElementById("ccId").focus(); 放到Vue.nextTick函数里面就能看到焦点了。

但document.getElementById("ccId").style.height = "100px";不用放到Vue.nextTick里面，从这里我们可以看出更改高度是在更新dom之前就可以进行。