vuejsの気になったところ

watcherの注意点

wacherの中ではthisを使えない。なるべくcomputedを使う。

watch: {
    counter() {
        const vm = this;
        setTimeout(() => {
            vm.counter = 0;
        }, 3000);
    },
},

v-onディレクティブでの注意点

<!-- method event handler。vue側がいい感じに解釈 -->
<button @click="countUp">+1</button>
<!-- javascript式 -->
<button @click="countUp()">+1</button>

v-showの特徴

  • display: noneのcssがかかる
  • 全てdomに追加されるため初期描画が遅い
  • 要素を削除せずにcssをかけるだけなので描画の切り替えが早い
  • elseがない

v-forの特徴

  • 要素の変更が最小限になるようになるべく再利用する
  • 予期しないバグを生む可能性があるので, key属性をつける

仮想ノード

createElemetで作られているのは仮想DOMを作るための仮想ノードである。いわゆるDocument Object Modelではなくjavascriptのオブジェクトである。

new Vue({
        data: {
          name: "tak",
        },
        render(createElement) {
          return createElement("h1", "hello, " + this.name)
        }
      }).$mount("#app3");

仮想DOM

DOMの変更を高速に反映するための仕組み。DOMを直接変更するには時間がかかるので, 仮想DOMを変更し前の仮想DOMとの差分を反映して高速に描画する。

Babel

JavaScriptのコードを新しい書き方から古い書き方へと変換するツール

Webpack

webpackは、モジュールを束ねるツールです。

モジュールとは、プログラム内のJavaScriptファイル（以下：jsファイル）やsassファイルなどのことです。webpackを使うことで、複数のjsファイルをひとつのjsファイルにまとめたり、複数のsassファイルをひとつのsassファイルにしたりできます。

キャメルケースとケバブケース

親から子にpropsを渡すときはケバブケース。html内で属性を定義するから。

子が親からpropsを受け取るときはキャメルケース。jsとして扱うから。

子が$emitを使ってカスタムイベントを作成するときはケバブケース。js内ではただの文字列であり, 親は属性名としてhtml内でイベントを受け取るからである。

propsで配列やオブジェクトを渡した場合, 子が親のデータを書き換えられる

ここは割とバグを生みそうな点。NumberやStringはプリミティブ型なのに対してこれらはオブジェクト型で参照渡しになっているからである。

slotのstyleは親が優先される

slotの内容を定義しているcomponent内で完結していてわかりやすいためなのかなと思っている。

v-modelをコンポーネントに対して使う

これはなんか忘れそう感があったので書いておく

<EventTitle v-model＝"eventData.title"></EventTitle>
// 以下と一緒
<EventTitle :value="eventData.title" @input="eventData.title = $event"></EventTitle>

受け取る側は以下の感じでemitを使う

<template>
  <div>
    <label for="title">タイトル</label>
    <input id="title" type="text" :value="value" @input="$emit('input', $event.target.value)">
    <pre>{{ value }}</pre>
  </div>
</template>

<script>
export default {
  props: ["value"]
};
</script>

computedとfilterの違い

methodは親ノードに変更があるたびに発火してしまい, computedは子ノードに変更がない限り発火されなかったが同じような違いがfilterとcomputedにもある。つまりfilterは親ノードに変更があるたびに発火する。

よって, パフォーマンスを考えるならfilterを使わずに全てcomputedで書いた方がいい。ただ書いていると冗長になるので, 場合に応じてfilterを使う。

global mixinはプロジェクトを荒らす

ヘッダの通り。全てのコンポーネント生成時に挿入されるのでパフォーマンスが悪くなる。プラグインを作る時などに使う。

複数の要素を切り替えるトランジションの注意点

  • v-showは使えない。v-ifを使う。
  • key属性をつける。vueはタグが切り替わったときにtransitionを適用するという仕組みなので, 同じタグで区別がつかない場合はtransitionを適用せずにタグの中身だけが書き換わる

transitionの＠enterと@leaveのdone引数に関する注意点

jsのアニメーションとcssのアニメーションは共存できる。よって片方のアニメーションが終わったとしてももう片方のアニメーションが動き続けるのがデフォルト。しかし, @enterや@leaveでdoneを使うとcssのアニメーションは終了する。

cssアニメーションがない場合はdoneを必ずつけなければならない。

@leaveCancelledの注意点

@leaveCancelled自体は消えるアニメーションがキャンセルされた時に実行されるもの。

これはv-show属性の要素がある場合にのみ実行される。

v-moveの注意点

.fade-move {
  transition: transform 1s;
}

のように書けばtransition-groupに要素が追加されるときにもアニメーションを適用することができるが, 要素を削除するときのカクツキをなくすには

.fade-leave-active {
  transition: opacity 1s;
  position: absolute;
  width: 200px;
}

のように設定しなければならない。

transitionを再利用するときはコンポーネントを使用する

コンポーネントを定義してslotを使うのが定石らしい

transitionが適応されている時のスクロールの振る舞いを非同期実行する

応用オブ応用

以下App.js

<template>
  <div style="width: 700px; margin: auto; padding-top: 50px;">
    <router-view name="header"></router-view>
    <transition name="fade" mode="out-in" @before-enter="beforeEnter">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  methods: {
    beforeEnter() {
      this.$root.$emit("triggerScroll");
    }
  }
};

以下main.js

scrollBehavior(to, from, savedPosition) {
    return new Promise(resolve => {
      this.app.$root.$once("triggerScroll", () => {
        let position = { x: 0, y: 0 };
        if (savedPosition) {
          position = savedPosition;
        }
        if (to.hash) {
          position = { selector: to.hash, offset: { x: 0, y: 100 } };
        }
        resolve(position);
      });
    });
  }

v-modelをVuexで使う場合

computedの要素にオブジェクトを置いてそこにget()とset()を定義できる

computed: {
    message: {
      get() {
        return this.$store.getters.message;
      },
      set(value) {
        this.$store.dispatch("updateMessage", value);
      }
    }
},