アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Vue.jsのライフサイクルとOnsen UIについて

はじめに

Monacaでは、「Onsen UI + Vue.js」テンプレートが用意されています。

Onsen UIでは、「ons.disableAutoStyling()」メソッドのようにOnsen UIを呼び出した直後に実行する必要がある機能があります。 今回は、Vue.jsで開発する場合、どのライフサイクルのタイミングで「ons.disableAutoStyling()」メソッドを実行すれば適用されるか確認してみました。

注意点として、「Onsen UI + Vue.js」で「ons」オブジェクトを使う場合は、「this.$ons」でアクセスする必要があります。

検証するライフサイクル

今回検証したVue.jsのライフサイクルは、

ライフサイクル名 説明
beforeCreate インスタンスが初期化されるときに呼ばれます。
created インスタンスが作成された後に呼ばれます。
beforeMount マウントが開始される直前に呼ばれます。
mounted インスタンスがマウントされた後に呼ばれます。

になります。

検証環境

検証環境は、以下になります。

import 'onsenui';
import Vue from 'vue';
import VueOnsen from 'vue-onsenui';

// Onsen UI Styling and Icons
require('onsenui/css-components-src/src/onsen-css-components.css');
require('onsenui/css/onsenui.css');

import App from './App.vue';

Vue.use(VueOnsen);

new Vue({
  beforeCreate() {
    console.log("beforeCreate");

    // this.$ons.disableAutoStyling();

    // document.addEventListener("deviceready", onDeviceReady, false);
    // function onDeviceReady() {
    //   console.log("onDeviceReady");
    // }

    // this.$ons.ready(function() {
    //   console.log("$ons.ready");
    // });
  },
  created() {
    console.log("created");

    // this.$ons.disableAutoStyling();
  },
  beforeMount() {
    console.log("beforeMount");

    // this.$ons.disableAutoStyling();
  },
  mounted() {
    console.log("mounted");

    // this.$ons.disableAutoStyling();
  },
  el: '#app',
  template:'<app></app>',
  components: { App }
});

検証1

上のコードを実行すると、下の画像の順番でログが出力され、タブの位置は上になりデフォルトでオートスタイリングが有効の状態になっています。

image1

image2
オートスタイリングが有効の状態

検証2

各ライフサイクルに設定されている「this.$ons.disableAutoStyling()」のコメントを外して実行したところ、

  • beforeCreate
  • created
  • beforeMount

までは、下の画像のようにタブの位置は下になり、オートスタイリングの解除が有効になりましたが、

image3
オートスタイリングが解除の状態

  • mounted

では、タブの位置は上になりオートスタイリングが有効の状態に戻りました。

image2
オートスタイリングが有効の状態

検証3

「beforeCreate」に記載されている「deviceready」と「this.$ons.ready()」のコメントを外すと、下の画像の順番でログが出力されました。

image4

「this.$ons.ready()」に設定されているコールバック関数は、Onsen UIの初期化が完了した後に呼び出される関数になります。

「mounted」の後に「$ons.ready」が出力されていますが、Onsen UIの初期化が完了する前でも「mounted」で「this.$ons.disableAutoStyling()」を実行した場合は、設定が間に合っていないことが分かります。

おわりに

今回検証した「ons.disableAutoStyling()」をVue.jsで使う場合は、「mounted」よりも前に実行する必要があることが分かりました。 そのほか、実行するタイミンが指定されている機能の場合は、Vue.jsのライフサイクルを意識して実装する必要がありそうです。

Vue.jsのライフサイクルの詳細については、ライフサイクルフック を参照してください。