Vue.js 学習メモ

vue

これは何か

Vue.js の公式ドキュメントを読んだときのメモです。
気になったところ、後でもう一度確認が必要そうなもの、など。
Vue.js のバージョンは v2.5.17。

Vue.js ガイド

基本的な使い方

f:id:ryotah:20180825165147p:plain

  • テンプレート構文
    • v-once, v-html, v-bind など
    • {{ number + 1 }}

      • 単一の式だけ含むことができるというものです

      • テンプレート式はサンドボックスで、Math や Date といったホワイトリストにあるグローバルオブジェクトだけアクセスできます。テンプレート式内でユーザーが定義したグローバルオブジェクトにアクセスしようとしてはいけません。

    • ディレクティブ

      • ディレクティブは v- から始まる特別な属性です

      • 修飾子
        • .prevent 修飾子
          • v-on:submit.prevent="onSubmit"
    • 省略記法
      • v-bind => :
      • v-on => @
  • 算出プロパティとウォッチャ
    • 算出プロパティ
      • computed

        • Vue は vm.reversedMessage が vm.message に依存していることを知っているので、vm.message が変わると vm.reversedMessage に依存する全てのバインディングを更新します。

      • 算出プロパティ vs メソッド

        • 算出プロパティは依存関係にもとづきキャッシュされるという違いがあります。

      • 算出プロパティ vs 監視プロパティ
        • 汎用的なものもあるよ
      • 算出 Setter 関数
        • setter 関数もある
    • ウォッチャ

      • データが変わるのに応じて非同期やコストの高い処理を実行したいときに最も便利です。

  • クラスとスタイルのバインディング
  • 条件付きレンダリング
    • vue-101-conditional - StackBlitz
      • デモ
    • key による再利用可能な要素の制御

      • しかしこれは必ずしも望ましいことでないかもしれないので、Vue は”この 2 つの要素は完全に別個のもので、再利用しないでください” と伝える方法を提供します。それは、一意の値を持つ key 属性を追加するだけです:

    • v-show は <template> 要素をサポートせず、v-else とも連動しないということに注意してください。

    • ー般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。

  • リストレンダリング
    • vue-101-list - StackBlitz
      • デモ

    • 繰り返される DOM の内容が単純な場合や、性能向上のために標準の動作に意図的に頼る場合を除いて、可能なときはいつでも v-for に key を与えることが推奨されます。

    • 配列の変化を検出
      • 変更メソッド
      • 配列の置き換え

        • これは、Vue が既存の DOM を捨てて、リスト全体を再描画の原因になると思うかもしれません。幸いにもそれはそうではありません。Vue は DOM 要素の再利用を最大化するためにいくつかのスマートなヒューリスティックを実装しているので、重複するオブジェクトを含んでいる他の配列を配列で置き換えることは、とても効率的な作業です。

    • オブジェクトの変更検出の注意
    • フィルタ/ソートされた結果の表示
    • 範囲付き v-for
    • <template> での v-for
    • v-for と v-if

      • それらが同じノードに存在するとき、 v-for は v-if よりも高い優先度を持ちます。これは v-if がループの各繰り返しで実行されることを意味します。

    • コンポーネントと v-for

      • 2.2.0 以降で、コンポーネントで v-for を使用するとき、key は必須です

      • is="todo-item" 属性に注意してください。 これは DOM テンプレートでは必要で、なぜなら <ul> 要素の中では <li> のみが有効だからです。これは <todo-item> と同じ意味ですが、潜在的なブラウザの解析エラーを回避します。詳細は DOM テンプレート解析の注意事項 を参照してください。

  • イベントハンドリング
    • vue-101-events - StackBlitz
      • デモ
    • イベント修飾子
    • キー修飾子

      • グローバルな config.keyCodes オブジェクト経由でカスタムキー修飾子のエイリアスも定義できます

      • KeyboardEvent.keyで公表されている任意の有効なキー名をケバブケースに変換することによって、修飾子として直接使用できます。

    • システム修飾子キー
      • .exact 修飾子
      • マウスボタンの修飾子

    • ViewModel が消去されるときに、すべてのイベントリスナーは自動で削除されます。手動でそれらの消去をおこなうことを気にする必要はありません。

  • フォーム入力バインディング
  • コンポーネントの基本

Components In-Depth

トランジションとアニメーション

  • （必要になったら）

再利用と構成

  • vue-101-reusability-and-composition - CodeSandbox
    • デモ
  • ミックスイン

    • コンポーネントがミックスインを使用するとき、ミックスインの全てのオプションはコンポーネント自身のオプションに”混ぜられ”ます。

    • オプションのマージ

      • 例えば、データオブジェクトはシャローマージ(1層のプロパティ)され、コンフリクトした場合にはコンポーネントのデータが優先されます。

      • 同じ名前のフック関数はそれら全てが呼び出されるよう配列にマージされます。ミックスインのフックはコンポーネント自身のフック前に呼ばれます。

      • などなど
    • グローバルミックスイン

      • 多くのケースでは、上記の例のような、カスタムオプションを処理するようなものに使用すべきです。また、重複適用を避けるため プラグイン としてそれらを作成することをお勧めします。

    • カスタムオプションのマージストラテジ

      • カスタムオプションがマージされるとき、それらは単純に既存の値を上書きするデフォルトのストラテジを使用します。カスタムロジックを使用してカスタムオプションをマージする場合、Vue.config.optionMergeStrategies をアタッチする必要があります:

  • カスタムディレクティブ
  • 描画関数とJSX
    • ノード、ツリー、および仮想 DOM

      • 全ての要素はノードです。全てのテキストはノードです。コメントさえもノードです！

      • 仮想 DOM

        • Vue は、実際の DOM に加える必要がある変更を追跡する仮想 DOM を構築することで、これを達成します。

        • return createElement('h1', this.blogTitle)
    • createElement 引数, 素の JavaScript によるテンプレートの書き換え, JSX, 関数型コンポーネント, テンプレートのコンパイル
      • （後で読む）
  • プラグイン

    • プラグインは通常 Vue にグローバルレベルで機能を追加します。

    • 書くことができるプラグインはいくつかのタイプがあります:

      • グローバル・メソッドを追加
      • グローバル・アセットを追加（ディレクティブ/フィルタ/トランジションなど）
      • グローバル・ミックスインにより、1つ、または複数のコンポーネントオプションを追加
      • Vue.prototype に記述することにより、1つまたは、複数の Vue インスタンスメソッドを追加

    • Vue.use() グローバルメソッドを呼びだすことによってプラグインを使用します:

    • Vue.use は、同じプラグインを 1 回以上使用することを自動的に防ぎます。

  • フィルター

ツール

  • （後でよむ）

スケールアップ

内部

移行

  • （必要になったら）

その他

  • （必要になったら）

その他のドキュメントへのリンク