VueでDOM更新後の要素取得(nextTick)

Vueでの機能でnextTickについてのメモ

Watchしてるdataの変数の変更を検知したとしても、それと連動しているDomの変更を検知することは難しいが、nextTickを使えば簡単に検知、またイベントハンドリングすることが容易である。

<button v-on:click="list.push(`list${list.length+1}`)">addList</button>
<ul ref="target">
    <li v-for="str in list">{{ str }}</li>
</ul>

new Component({
    el: '#app',
    data: {
        list: [
            'list1',
            'list2',
            'list3',
            'list4',
        ]
    },
    watch: {
        list: () => {
            this.$nextTick(() => {
                console.log(`ulの縦幅:${this.$refs.list.offsetHeight}`);
            })
        }
    }
})

addListのボタンクリック時にはかれるconsoleは、<li>タグ５つ分の縦幅が出力されるだろう。

だがもし仮に、以下のように実装していたら...

new Component({
    el: '#app',
    data: {
        list: [
            'list1',
            'list2',
            'list3',
            'list4',
        ]
    },
    watch: {
        list: () => {
            console.log(`ulの縦幅:${this.$refs.list.offsetHeight}`);
        }
    }
})

listの変数には'list'が追加されているが、このときDOMの変更はまだ行われていないため、
consoleは<li>タグ4つ分の縦幅が出力されるだろう。