Vueチュートリアル 1日目 - 蚊帳の中の日記

今日からVue.jsのチュートリアルを始めた。一通り読んでいき、初見で思ったことや覚えておいたほうが良さそうなことをメモ書きとして書いておく。

進捗度合い

インストール〜リストレンダリングまで読み進めた。最初のビルドが結構ごちゃごちゃしてて、頭の中で整理できてない感はあるけれど、とりあえず進めてみることにする。

メモ

https://jp.vuejs.org/v2/guide/index.html

ユーザーインターフェイスを構築するプログレッシブフレームワーク
開発用ビルドと本番用ビルドなどビルド方法も幾つか存在するみたい
補足：CSPとか知っておくと良さそう。https://oxynotes.com/?p=8895
reactive: 受身的な、待ちの姿勢。反応を示す、反応が早い、反応を起こしやすい。つまり、変更などにすぐに反応して反映しやすいってことらしい。
要素の属性の束縛（バインディング）
directive:ディレクティブ、指令、命令
テキストをデータに束縛できるだけではなく、DOMの構造にデータを束縛できる。
interaction: 交流、ふれあい、やりとり、相互作用
なるほど。データや捜査対象のDOMを束縛できるから、jsで設定も楽だし、ロジックの開発に集中できるメリットがありそう。
双方向バインディング

Vue Componentを上手く使えば、大規模アプリケーションにおいてコンポーネントを小さく分割でき、開発が行いやすくなる。 component使うと例えばこんな感じになりそう

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

一見、わけのわからないタグを使ってhtmlを書いているように見えるけど、各タグはvue componentで小さく分割されている。分割されたcomponentはこのようにコード量を大幅に削ったものになるらしい。最初はウッとなりそうだけど、慣れればかなり見やすくなりそう。

https://jp.vuejs.org/v2/guide/instance.html

慣例として、 vm (ViewModel の略) を Vue インスタンスの変数名としてよく使っている。インスタンス名に迷ったらvmとかで良いかも。
root vue instance
とりあえず、「全ての Vue コンポーネントは Vue インスタンスで、同じオプションオブジェクトを受け入れる(いくつかのルート特有のオプションを除く)と理解しておけば十分」らしい
vm インスタンスのdataプロパティは、インスタンスが作成したときにリアクティブになる。あとからインスタンス作成後にdataプロパティに、新規の値を追加しても、それはリアクティブな状態ではない。あとから追加するのがわかっているのなら、初期値を追加しておくべき。とのこと。
Object.freeze()
ユーザー定義のプロパティと区別するために、定義済みのプロパティやメソッドは、$が着いている。apiリファレンス
instance life cycle hook
インスタンスプロパティとかコールバックでアロー関数を使うとエラーになるみたい。created: () => console.log('hoge)`みたいなのはだめみたい。

https://jp.vuejs.org/v2/guide/syntax.html

render関数を利用してjsだけでHTMLを描画する方法もある。ただ基本的にはtemplateを使うのが推奨されているらしい。
mustaches（２重中括弧）。ちなみに和訳は口ひげ
v-htmlは生のHTMLを出力するためにあるが、XSS脆弱性に起因するので、基本的に使わないほうが良さそう。
{{ 単一式 }}はOKだけど、{{ 文 or 単一文 }}は実行できない。OKなのは{{ 1+1 }}とか。NGは{{ var a = 1 }}みたいな式になるケース。ちょっとした単一式ならmustachesを使えそう。
ディレクティブ

https://jp.vuejs.org/v2/guide/computed.html

テンプレート内にロジックを書くと複雑になるので、算出プロパティというのがある。インスタンス内の設定したdataに依存したロジック結果を出してくれて、vm.hogeFugaみたいにあプロパティとして呼び出せる。ドキュメントではgetter関数として利用すると書いている。
算出プロパティ。。。なんか和訳イケてない気が。computed property
算出プロパティは、普通のメソッド定義と違い、依存関係に基づいて結果をキャッシュしてくれる。message が変わらない限りは、reversedMessage に何度アクセスしても、関数を再び実行することなく以前計算された結果を即時に返すということです。
算出プロパティじゃなくて、computed propertyと呼ぶ。。。
computed propertyはキャッシュを意識したほうが良さそう。
computed propertyはsetterもある！
多くの場合はcomputed propertyで事足りるけど、データの変更に合わせて非同期通信やコストの高い処理を使うときはwatchオプションが良さそう。https://jp.vuejs.org/v2/api/#vm-watch

https://jp.vuejs.org/v2/guide/class-and-style.html

クラスとスタイルも属性になるので、v-bindでバインディングすることができる。
v-bind:classはハッシュみたいに渡せたり、computed propertyも渡せるし、配列で複数のプロパティを渡すことも可能
componetを利用するときは注意が必要で、例えば、componentのtemplateに<p class="hoge"></p>とかあったとして、そのcomponentを呼び出す先で<my-component class="{active: isActive}"></my-componet>とかしたら、rootのhogeクラスも引き継いでくる。その要素上に存在するクラスを上書きするということはない。知っておいておいたほうがハマりが少ないかも。
インラインスタイルのバインディングでやるときはfontSizeみたいにキャメルケース。ハイフンで区切る宣言でもいいみたい。
あと、自動プリフィックス機能もあるみたい。便利。まあ、もうベンダープリフィックスはオワコンではあるけど。

https://jp.vuejs.org/v2/guide/conditional.html

v-if,v-else,v-else-ifだけど、HTMLタグも間に入っているから、実際に使ったらすごい見づらそう。if内のHTMLとかが長かったら、「どこにelse句あるんだ？？」ってなりそうと思った。
なんで、条件付きレンダリングの章で、説明されてるのかよくわからなかったけど、keyによる再利用可能な要素の制御ができるみたい。
？？？ => v-show はtemplate要素をサポートせず、v-else とも連動しないということに注意してください。
v-ifは遅延描画 lazy renderingらしい。
ディレクティブは優先度があるらしく、v-forはv-ifよりも優先度が高いみたい。CSSみたいだな

v-showとv-ifの使い分け

とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。

うーん。日本語が理解しにくい。何となく分かるけど。

https://jp.vuejs.org/v2/guide/list.html

v-forはindexもとれる

<li v-for="(item, index) in items">
  {{ index }} - {{ item.message }}
</li>

第２引数にindex値がくるみたい。これはrubyのeach_with_indexと同じじゃ。 * ハッシュだったら、keyとindex両方渡せるのか。

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

地味に便利じゃね？と思った。 * in-place patch戦略？？？

インデックスでアイテムを直接設定しても、リアクティブにその要素の値を設定できない。でもsetを使えばいける。
配列の長さを設定し直しても、リアクティブに長さを変更できない。でもspliceを使えばいける。

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // これをやっても、bがリアクティブにbにはならない
vm.items.length = 2 // これをやっても、要素数がリアクティブに２個ならない

vm.$set(vm.items, indexOfItem, newValue) // これなら行ける
vm.items.splice(newLength) // これなら行ける

2.2.0 以降でcomponentでv-forを使う場合はkeyは必須みたいです。
このリストレンダリングの章の最後に簡単なTODOアプリの基本が載っていて参考になりそう。