【Vue】Composition API のライフサイクル

目的：同じ論理的な関心事に関連するコードを並べること

setup コンポーネントオプション

・コンポーネントが作成される前に props が解決されると実行され、 Composition API のエントリポイントとして機能する

・setup オプションは props と後で紹介する context を受け付ける関数であるべき

・setup から返される全てのものは、コンポーネントの残りの要素 (computed プロパティ、methods、ライフサイクルフックなど) およびコンポーネントの template に公開される

・returnを書き忘れるとエラーでる

ライフサイクルフックを setup の中に登録する

・Composition API におけるライフサイクルフックは Options API と同様の名称だが、on というプレフィックスが付いている

例） mounted → onMounted

f:id:n-moeko1966:20220113205505p:plain

createdとmountedの違い

・createdはDOMがまだ作られていない状態で、mountedではDOMが作成された直後の状態

vue.jsのcreatedとmountedの違いを目で見て理解 | アールエフェクト

DOMとは

・Document Object Modelの略

・JavaScriptからHTMLやCSSのデータを取得、操作するための仕組み

・htmlドキュメントをツリー構造として表現したもの

5分で分かるVue.jsの基礎 - Qiita

実際のコードで流れをみる

①最初に「app.js」が読み込まれる

import { createApp } from 'vue';
import App from './App.vue';
import { router } from './router'
import { store } from './store'

createApp(App)
    .use(store)
    .use(router)
    .mount('#app')

Vue.jsインスタンスのライフサイクルダイアグラム・Vueのインスタンスを作成…new Vue()

createApp(App)

・データの初期化…Init

・Created

・テンプレートを読み込んでレンダリング(HTMLで形をつくる)する

・createより後、mountより前で動いている、はず！

    .use(store)
    .use(router)

・views＞welcome.blade.phpの「id="app"」に対して動く

　VueのインスタンスをHTML(テンプレート)に入れる

　※これ以降DOMは変わらない！！

　　マウント後にHTML要素を変更(ex:getElementByIdtとか)すると失敗する

    .mount('#app')

onMountedを使いたいときは

<script>
import { onMounted, reactive } from "vue";
import axios from "axios";

export default {
  name: "Return",
  setup() {
    const data = reactive({
      rental_id: 3,
      current_date: "2022-01-01",
    });
    const returnData = async () => {
      console.log(data.rental_id);
      console.log(data.current_date);
      // rentalsテーブルのreturn_dateに返却ボタンが押された日の日付を入力
      await axios.patch("http://127.0.0.1:8000/api/rentals/" + data.rental_id, {
        return_date: data.current_date,
      });
      window.location.href = "http://127.0.0.1:8000/status";
    };
    onMounted(() => {
      returnData();
    });
    return { data, returnData };
  },
};
</script>