Vue 3
Composition API
reactive()を使うとオブジェクトや配列への変更をVue.jsが追跡してくれる
code:js
export default {
setup() {
const state = reactive({ a: 1 })
return { state }
}
}
reactive()で作成した状態はネストしたオブジェクトや配列への変更も検知してくれる
ルート要素の変更のみを追跡したいときはshallowReactive()を使う
reactive()はオブジェクトや配列での使用のみを想定していて、もしプリミティブ型などをリアクティブにしたいときはref()を使う
Computed properties
code:js
const user = reactive({
name: 'foobar',
})
const pendingTasks = computed(() => user.tasks.filter(isPending))
ref()と同様にcomputed()の戻り値の.valueで結果を参照できる