Zenn
📘

Vue Developer の学習ノート

2023/03/09に公開
Vue.js
Vue.js
tech

Vue.jsのロードマップ

  • 以下のロードマップはVue.jsの知識を確認していくのに役立ちます。
    https://roadmap.sh/vue
  • 今回ロードマップの学習内容をまとめました。
    • 基本的にはVue2ではなくVue3の内容になっています。

Vue CLI

  • Vite + Vueでのプロジェクトを作成するためのコードは以下になります。
$ npm init vue@latest

Components

  • Vue.jsのコンポーネントはUI要素を分割したものであり、再利用可能なものとしてUIに組み込むことができる。

Single File Components

  • シングルファイルコンポーネントは.vue拡張子のVue.jsで推奨されるUIの記述方法である。
    • html部分のテンプレート、javascript部分のスクリプト、css部分のスタイルで構成される。

コンポーネントの親子関係

  • Vue.jsはコンポーネントの親子関係があり、子コンポーネントは親のテンプレート部分に記述される。
    • 親子関係にあるコンポーネントは親→子にはpropsでデータを渡し、子→親にはemitでイベントを送信することができる。
    • またprovide/injectを使用してデータを保持することで、親子関係にないコンポーネントのデータの受け渡しが可能になる。
    • 親コンポーネント内で子コンポーネントのclassやsytle,idなどを記述することで、子コンポーネントはそれらの属性をマージすることができる。
      • またslotを子コンポーネントに使用することで親コンポーネントからhtml要素の挿入も可能になる。

directives

  • Vue.jsではhtmlテンプレートの要素にv-プレフィックスを持つv-bindやv-onをclassやidのように追記することで機能を追加できる。
    • v-bind→:,v-on→@,v-slot→#といった省略記法も存在する。

Composion API

  • Vue2まではOptions APIでscript部分が記述されていたが、Vue3のComposition APIの登場で再利用性や可読性が向上した。
    • ロジックをcomposableとしてステートフル(状態を保持)に切り出すことができる。

リアクティブ性

  • Vue.jsではデータの変更を検知し、自動的に再描画する機能を付与することができる。
    • refはプリミティブ型をラップすることでリアクティブにする。
    • reactiveはオブジェクトをラップすることでリアクティブにする。
    • computedを使用した算出プロパティは式をラップして式内のリアクティブな値の更新を検知することができる。
      • また式が簡単であるばあいは直接htmlテンプレートに組み込むことも可能。
    • watchは第一引数の変更を検知して第二引数のコールバック変数を実行する。

ライフサイクル

  • Vue.jsではonMountedによってコンポーネントがマウントされた後に呼び出すコールバック関数を設定することができる。
    • またDOMの更新後にコールバック関数を実行できるものとしてonUpdatedやnextTickが使用できる。

Discussion