iku8blog

Webエンジニアのタダのメモ。

Vue Composition API初見メモ

今まで使ってきたClassAPIと使い方がかなり異なるので、メモ。

watch, watchEffect

watch

watchは引数を取り、引数に指定した変数が変化したとき呼ばれる

watchEffect

watchEffectは引数を取らず、watchEffectのコールバック関数内で使っている変数が変化したとき呼ばれる。発火タイミングはcomputedっぽい

propsで子に渡した値をwatchしようとしたとき、setup(props)のように受け取らないと動かない

これはだめ

f:id:iku8:20200726005945p:plain

こっちなら動く

f:id:iku8:20200726005957p:plain

ref, reactive

まずvueでいうリアクティブというのは、一つの値がその値を使ってる他の値も変化するということ(a,bがあり、bはaをつかっているとする。aが変化すると一緒にbも変化する)

ref

プリミティブ値をリアクティブ化する

refで定義した変数の値には.valueでアクセスする(template内では不要)

let n = ref(10)
console.log(n.value)
n.value = 100
console.log(n.value)

reactive

objectをリアクティブ化する

特殊なのはrefで定義したリアクティブをreactiveで変数を定義するときにオブジェクトのプロパティとして入れれば、valueでアクセスする必要はない

const count = ref(0)
const state = reactive({
  count
})

console.log(state.count) // 0
console.log(count.value) // 0