在專案中最近遇到一種情況： 在一個頁面中點選快捷鍵會調出另一個頁面，這個頁面一個元素是輸入框，一個元素是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之前就可以進行。