Vue.js チートシート

Sun, 10 May 2020 07:24:04 +0900

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ファイルにしたりできます。

Vuejs on ashitaka blog