Vue.js

背景 refとreactiveの使い分けがパッとでてこなかったことがあったのでまとめていく。 概要 どの状況で使い分ければいいのか refとreactiveの違い 本題 1.どの状況で使い分ければいいのか refはプリミティブ型に対して使用する。 reactiveはオブジェクト型に対して使用する。 2.refとreactiveの違い ref const boolean = ref(false) // export function ref<boolean>(value: boolean): Ref<boolean> TypeScriptの場合は、引数(初期値)を型推論してくれる。 明示的にしたい型注釈したい場合は、ref<boolean | null>(false)と使用することもできる。 基本的になんでも(オブジェクト、配列、プリミティブ)refで使用ができる。 引数の値がオブジェクトの場合は、Vue内部でreactiveに更新している。更新している負荷を与えてしまうため、オブジェクトの場合は、reactiveを使用したほうがいいと言われている。 ref.valueでデータを格納する Ex)boolean.value = true reactive const user = reactive({ firstName: '太郎', lastName: '山田', height: 160, weight: 50 }) // const user: {firstName: string, lastName: string, height: number, weight: number} TypeScriptの場合は、引数(初期値)を型推論してくれる。 型注釈をつけたい場合は、ジェネクリスを使用できる const user = reactive<{ firstName?: string lastName?

背景 Vue.jsを使用する際にwatchを使う頻度はそこまで多くなく、使う度にドキュメントを確認するので、記事にまとめておく。 概要 Vue3のwatchとwatchEffectの仕様をまとめていく。また、それぞれの違いもまとめる。 本題 watch 説明 指定したデータを監視して、変化があればコールバック関数が実行する。 使い方 単一のデータ監視と複数のデータ監視の2種類の使い方が存在する。 1. 単一のデータを監視する場合 const count = ref(0) // 第一引数に監視したいデータを記載する watch(count, (newCount, prevCount) => { /* ... */ }) const state = reactive({ count: 0 }) // 第一引数に監視したいデータをコールバック関数で記載する watch(() => state.count, (newCount, prevCount) => { /* ... */ } ) 2. 複数のデータを監視する場合 配列を使用することで、複数のデータを監視できる 複数の監視データが同時に変更する時には、コールバック関数は一度して動かないため注意 const firstName = ref('') const lastName = ref('') // 第一引数を配列にしている watch([firstName, lastName], (newValues, prevValues) => { console.