概要

• vue3 を触ったのでその備忘録。vue.js ビギナーズガイドを読んだ備忘録

vue2 の問題

options API

optionsAPI は、コンポーネントの処理をプロパティ毎に記載することからも、コードを読むことが難しくなる傾向にある。 以下の観点でプロパティを外に出して、使えるようにする。

• utils or composables ディレクトリを作って入れる
• mixins を使って外出しをする
• vuex を使う

上記 3 種類で対応している。最も見かけるのは utils のような形で切り出し汎用的にするようなことだ。とはいえ、冗長さは避けることができない。

composition API

vue3 で適用される composition API は optionsAPI と違い、プロパティで書くことをやめて setup()ないのどこでも記述できるようにした。

<script>
{ref, computed} from 'vue'
export default {
setup() {
    const firstName = ref('Hoge')
    const lastName  = ref('Tarou')

    const name = computed(() => firstName + "" + lastName))

    return {
        name
    }
}
}
</script>

上記のように、どこでもかけるので、utils も使いやすくなる(vue ライブラリを使うことになるので、composables というディレクトリで書くのが普通？)

//composables/user

{computed} from 'vue'
export  const createUserFullName = computed((firstName, lastName) => firstName + " " + lastName)

という形で書き出すことができ各種のファイルに分解することができる。

vue3 へ

javascript はもともとブラウザのみで動くものだった。しかし、Node の登場以降ブラウザだけでなく開発環境でも Javascript が動くようになった。Node.js がバンドラーを行い最適化する。vue でいえばこれを js に１つにまとめ HTML としてまとめる。

vite

vite は vue のプロジェクトを立ち上げるためのもの。昨今は react のような vue とは違うものにも対応している。 vite は開発環境を整えるための補助ツールのようなものである。そもそも vue は UI を構築するためのフレームワークであり、開発環境を整えるものではない。vue CLI がそれを担っているだけにすぎない。

npm init @vitejs/app

Reactivity API

Composition API の中でもリアクティブな値を管理するためのものは ReactivityAPI と呼ばれている。 値が変化した時に計算を行い、新たな値を返す関数、変化を監視して副作用を起こす

参考が一番わかりやすい。

const count = ref(1);
const obj = reactive({ count });

// ref はアンラップされる
console.log(obj.count === count.value); // true

// `obj.count` が更新される
count.value++;
console.log(count.value); // 2
console.log(obj.count); // 2

// `count` の ref も更新される
obj.count++;
console.log(obj.count); // 3
console.log(count.value); // 3

である通り、reactive は元のデータをコピーしたものであり、元が変わった場合 reactive をしているやつも変化する。Proxy というのが使われており、伝わるイメージで問題ない。

readonlyというメソッドもあるが、これは reactive であると変更が認められておりコピー先も変更されることになる一方で、readonly はそれが許されておらず、読み取り専用の Proxy を返す

computed

vue2 でも登場。監視対象に変化があることが検知されるには扱っている変数が Proxy である必要があり reactive であることが必要。Proxy は監視しているものに変更があると他の場所にも伝わっていくようになっているので、computed にもそれが伝わっているのだと思う。

watchEffect/watch

vue2 でも登場。

const count = ref(0);

watchEffect(() => console.log(count.value));
// -> logs 0

setTimeout(() => {
  count.value++;
  // -> logs 1
}, 100);

//watch
// directly watching a ref
const count = ref(0);
watch(count, (count, prevCount) => {
  /* ... */
});

リアクティブの状態に応じて、作用を 自動的に適用しなおす ために、watchEffect 関数を利用できる。これは依存関係をリアクティブにトラッキングし、変更されるたびに即座に関数を再実行する。reactive である count が変更された時内部の関数が実行される。

watch は vue2 のものと完全に同じ。引数に入っている(ここでは count)ものが変わった時、内部の内容が実行される。

ライフサイクルメソッドとライフサイクルフック

以下順番

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeUnmount
• unmounted

inject と provide

vuex に変わる状態を管理するもの。本ではもっと紹介した方がいいぐらいの重要な要素なのですがふっとばされていてダメ。

inject と provide のやり方は、まず provide はキーとバリューを登録する。登録されたバリューはそれ以下のコンポーネントで呼び出すことができるようになる。例えば、App.vue で定義すればほぼ全てのコンポーネントで内容を呼び出すことができるようになる。呼び出すためには、inject を使う。inject(key)で呼び出すことで、value の値を使うことができるようになる。

//store/todo.ts
const todoStore: TodoStore = {
  state: readonly(state), // storeでreadonlyを書くことでcomponentで読み込んでも上書きできないようにする。また、reactiveにして状態の変化をキャッチ
  fetchTodos,
  getTodo,
  addTodo,
  updateTodo,
  deleteTodo
};

export default todoStore;
export const todoKey: InjectionKey<TodoStore> = Symbol("todo"); //InjectionKeyにて型を入れている。keyはSymbolで記載する

//App.vue
import { defineComponent, provide } from "vue";
import TodoStore, { todoKey } from "../store/todo/index";
export default defineComponent({
  name: "App",
  setup() {
    provide(todoKey, TodoStore);
  }
});

//components/todo.vue
import { todoKey } from "./store/todo/index";
export default defineComponent({
  async setup() {
    const todoStore = inject(todoKey);
  }
});