p.46 createdとmountedの使い分け
created- リアクティブデータが初期化された直後に呼ばれる ＝ DOMは構築されてない
thisにはアクセスできるが$elやgetElementById()などでのDOMアクセスは負荷
mounted- DOMが作成された直後
$elやgetElementById()などを使用できる- すべての子コンポーネントがマウントされているかは保証しない
p.48 Vue.jsのライフサイクル
p.68 v-ifとv-showの使い分け
v-if- 条件を満たさない場合，DOMレベルで削除 = 監視解除
- コンポーネントならインスタンスは破棄，次の描画時は初期化されている
- 内側にディレクティブやコンポーネントを多用していたり，特定のデータを持っていないとエラーが起きる場合はこちらがよい
v-show- 条件を満たさない場合，
display: none;を付与 = 監視は継続 - 内側にディレクティブやコンポーネントが少なく，切り替えの頻度が高い場合はこちらの方がパフォーマンスよい
- 条件を満たさない場合，
p.70 リストデータの扱い
- リストデータ：オブジェクトを要素にした配列にするとよい (単なる文字列の配列でなく)
- プロパティにユニークキーをもたせることで，更新するとき仮想DOMによる描画最適化が行われるため
- 効率的な描画のため，ユニークな
key属性を設定することが強く推奨されている - VSCodeでもデフォルトのLinterでエラー扱いになる
- 効率的な描画のため，ユニークな
- e.g.
<li v-for="item in list" v-bind:key="item.id">- ↑の
v-bind:keyのところを指定すると描画最適化される
- ↑の
- プロパティにユニークキーをもたせることで，更新するとき仮想DOMによる描画最適化が行われるため
p.102 コンポーネントのイベントハンドリング
.native修飾子をつけるとコンポーネントのイベントを受けてハンドラ実行できる
1<!-- コンポーネントをクリックするとハンドラが呼び出される -->
2<my-component v-on:click.native="handler" />
3<!-- コンポーネントをクリックしてもハンドラが呼び出されない -->
4<my-component v-on:click="handler" />
p.113 フォーム入力の修飾子
.lazyをつけるとchangeイベントで同期- テキストフォームの場合，フォーカスが外れたりエンターを押したときに同期
- デフォルト(
.lazyなし)の場合は入力された時点で同期
p.123 算出プロパティのキャッシュ
- キャッシュを再構築するトリガになるのはリアクティブなデータのみ
- 算出プロパティで使う
Math.random()はリアクティブでないため，何度使用しても同じ数字が返される
p.209 リストトランジッション LeaveとMoveの同時発生
- 絞り込みなどで複数要素が同時に消えるとき，後ろのようsはLeaveとMoveの両方のクラスがつく
- このときCSSで両方が適用され，どちらかの設定がどちらかで上書きされる
- これを回避するためには
:not()をつかう
1.v-enter-active .v-leave-active {
2 transition: opacity 1s, transform 1s;
3}
4.v-move:not(.v-leave-active) {
5 transition: transform 1s;
6}
p.248 スプレッド演算子
- 配列やオブジェクトのリテラルを展開する
- 複数のオブジェクトを一つにまとめることもできる
1const array = [1, 2, 3]
2
3// バラバラの3つの引数として渡す
4myFunction(..array)
5
6// arrayを展開して4を加えた新しい一次元配列を作成
7const newArray = [..array, 4] // -> (4)[1, 2, 3, 4]
p.258 Vuexのコアコンセプト
p.271 Vuex ミューテーション
- 下記コードで
store.commit('update')するとA, B両方のupdateが実行される- これに対し，各moduleの定義で
namespaced: trueにすることで，commit('moduleA/update')のように個別アクセスできるようになる
- これに対し，各moduleの定義で
1const moduleA = {
2 state: {
3 count: 1
4 },
5 mutations: {
6 update(state) { state.count += 100 }
7 }
8}
9
10const moduleB = {
11 state: {
12 count: 2
13 },
14 mutations: {
15 update(state) { state.count += 200 }
16 }
17}
p.279 Vuex Strictモード
Strictモードを使うと，タイプミスなどで不用意にステートを変更すると警告が出るようになる
- 本番・運用では不要なので，環境変数で切り替えるようにするとよい
1const store = new Vuex.Store({ 2 strict: process.env.NODE_ENV !== 'production' 3})
p.313
- ページ遷移のエフェクトをつける一連のコード
1// ルータービュー用のVuexモジュール
2export default {
3 namespaced: true,
4 state: {
5 loading: false
6 },
7 mutations: {
8 start(state) { state.loading = true },
9 end(state) { state.loading = false}
10 }
11}
1// グローバルのナビゲーションガード
2router.beforeEach((to, from, next) => {
3 store.commit('view/start')
4 next()
5})
6router.afterEach(() => {
7 state.commit('view/end')
8})
1<!-- オーバーレイ用のコンポーネント -->
2<template>
3 <transition name="loading">
4 <div class="loading" v-if="loading">Loading</div>
5 </transition>
6</template>
7
8<script>
9export default {
10 computed() {
11 loading() { return this.$store.state.view.loading $}
12 }
13}
14</script>
1.loading-enter-active {
2 transition: all 0.25s;
3}
4.loading-leave-active {
5 transition: all 0.5s ease 0.5s;
6}
p.316 コンポーネントの非同期読み込み
- webpackのコード分割機能をつかって，必要になった時点でJavaScriptファイルを読み込むことができる
1const About = () => import('@/views/About')
2const router = new VueRouter({
3 routes: [
4 {
5 path: '/about',
6 component: About
7 // component: () => import('@/vue/About') でもOK
8 }
9 ]
10})
p.317 Vue Router ルートアクセス制限
- 認証を確認したいルートの定義: まずメタ情報をもたせる
1{
2 path: '/user',
3 component: User,
4 meta: { requiresAuth: true }
5}
- その後，グローバルなルート制御で認証チェックする処理を入れる
1router.beforeEach((to, from, next) => {
2 // 上位ルートを含めて人所グア必要なルートがあるかを確認
3 if (to.matched.some(record => record.meta.requireAuth)) {
4 // 認証状態を確認
5 if (!auth.loggedIn()) {
6 // 認証していなければログインページにリダイレクト
7 next({
8 path: '/login',
9 query: { redirect: to.fullPath }
10 })
11 } else {
12 next()
13 }
14 } else {
15 next() // 認証確認不要なルートなら普通に遷移
16 }
17})
Tagged: #Vue.js