Vueのインスタンス構築中は不格好
HTMLにおけるViewを管理するライブラリではよく言われることだけれども、
VueのElement構築中、不格好になってしまう状態がコンマ数秒ある。
その解決法が結構皆色々あるようなので、自分の解決法を書いてみる。
VueのComponent生成順序
こんなコードを全てのComponentに書いてみると判るのですが
index.js
ready: function() { console.log('global-compo1 is ready'); }
Vueの親インスタンスのreadyは全てのComponentがreadyとなってからです。
Comopnentの構築はDOMに書いてある上から順。
index.html
<body id="app">
<compo2></compo2>
<compo1></compo1>
<compo3></compo3>
</body>
console.log
compo2 is ready
compo1 is ready
compo3 is ready
app is ready
準備中のHTMLを非表示にしてると後で不便
Vueの構築中はまだElementにデータが入っていなくて、スタイルしか反映されていない状態がコンマ数秒続くのは不格好。
なのでこんなコードが推奨されているのだけれども
index.html
<body id="#app" v-show="show"></body>
index.js
new Vue({
el: '#app',
data: {
show: false
},
ready: function() {
this.$data.show = true;
}
});
この方法だと対処がざっくりすぎて、以下の場合は他の方法に書き換えることになる。
- Component内のElement位置・サイズを使ってあれこれしたいが、構築完了まで非表示なので数値が取れない
- 最初にXHRでデータを取ってきて、データを反映するまでの途中の状態を見せたくない
非表示にはせず、フタを被せる
どこのフレームワークでも同じ感じのことをやると思うけど、[1]を達成するには、フタで隠すことになる。
index.js
Vue.Component('huta', {
data: function() {
return {
show: true
}
},
events: {
'all:isReady': function() {
this.$data.show = false;
}
}
});
XHR待ちの場合
そして、[2]を達成するには、$dataでフラグを待機する。
index.js
new Vue({
el: '#app',
data: {
isReady: {
root: false
compo1: false
compo2: false
}
},
events: {
'isReady': function(component_name) {
this.$data[component_name] = true;
if (! _.includes(this.$data.isReady, false)) {
this.$broadcast('all:isReady');
}
}
},
ready: function() {
this.$emit('isReady', 'root');
}
本当はcomponentの準備ができたかどうか、手動で発行したいんだけども、
フラグを手動で管理するような実装になってしまうのがもやっとする。