概要

今回は、Vue.jsでよく使う主力のプロパティを書いていきます。

data

dataは、簡単に言うとファイル内で使うデータを設定するものになります。フォームに初期値を設定したり、別のファイルからpropsを使って受け取った値を組み込んだりすることができます。
そして、配列を格納する変数を設定して、メソッドを介したりして、複数のデータを格納することもできたりします。
https://ja.vuejs.org/guide/components/props.html
サンプルコードは以下のようになります。

methods

こちらは、ファイル内で使用するメソッドをまとめていくプロパティになります。
以下が、サンプルコードになります。

computed

こちらは、プロパティが更新されると、自動的に値が更新される算出プロパティです。
サンプルコードはこちらです。

こちらは、store/index.jsに定義している、メッセージの一覧を表示するためのメソッドを、画面が表示されると同時に呼び出しています。
このように、画面が表示されると同時に動かしたいメソッドを格納するプロパティです。

createdとmounted

Vue.jsのcreatedとmountedは、どちらもVue.jsコンポーネントのライフサイクルフックであり、それぞれ特定のタイミングで呼び出されるメソッドです。

createdは、Vue.jsインスタンスが初期化された直後に呼び出されるメソッドで、DOM要素が作成される前に呼び出されます。createdの中では、Vue.jsインスタンスに初期データをセットするなど、初期化に関する処理を行うことができます。

一方、mountedは、Vue.jsインスタンスがDOMにマウントされた後に呼び出されるメソッドです。このタイミングで、Vue.jsインスタンスが作成したDOM要素にアクセスすることができます。mountedの中では、DOMに関する処理を行うことができます。

簡単に言うと以下のような感じです。
createdはDOMがまだ作られていない状態で呼び出すメソッド、mountedではDOMが作成された直後の状態に呼び出すメソッド

components

これは、コンポーネント化したファイルの一覧をまとめるプロパティになります。

これは、チャット機能のフォームをコンポーネント化したものです。
templete内では、コンポーネント化したファイルを表示したい場所に、以下のように書きます。

参考にしたサイト

https://reffect.co.jp/vue/vue-js-created-mounted-diffrence#createdmounted
https://qiita.com/tanoken729b/items/5770d4c620163a25ad21

[cv:issue_marketplace_engineer]