2018年10月25日

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	インスタンスがマウントされた後に呼ばれます。

になります。

検証環境

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

使用テンプレート：Onsen UI V2 Vue Tabbar
検証端末：Androidエミュレーター APIレベル26
検証端末：Android版Monacaデバッガー v7.0.9
検証コード：main.js

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 }
});