Vueのインスタンスを構築中、不格好になる問題をもう少し考える #Vue.js

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の準備ができたかどうか、手動で発行したいんだけども、
フラグを手動で管理するような実装になってしまうのがもやっとする。