【Vue Composition API】WritableComputedRefな配列に変更を加える

1 min read読了の目安(約1600字

本記事の内容

  • 本記事は株式会社iCAREのフロントエンドチームがComposition APIを使用した開発で気づいた点を書いていきます

WritableComputedRefな配列に変更を加える

computedとは?

  • 再計算した値を返す
  • リアクティブな依存関係が更新されたときに再計算

WritableComputedRefとは?

  • Conposition APIに内包されている、リアクティブなType
  • RefやReactiveのようにリアクティブな値を定義

Vue.jsにおけるリアクティブに関しては公式ドキュメントが非常に分かりやすいです🐥

https://v3.ja.vuejs.org/guide/reactivity-fundamentals.html#リアクティブの基礎

Array.pushの場合

まずはWritableComputedRefの定義

// getは親コンポーネントからpropsで受け取った値を
// setは親コンポーネントに値をemitで渡す

const userList = computed<User[]>({
    get: () => {
        return props.userInfo
    },
    set: (value) => {
        emit('update:', value)
    }
})

配列にpushする

// ユーザーをpushで追加
const addUser = (name: string, age: number) =>
    userList.value.push(userInfo: {
        name,
        age
    }
)

配列の変更を検知しない

set: (value) => {
    console.log(value)
    // 検知しないのでログが出ない
    emit('update:', value)
}

分割代入の場合

// ユーザーをpushで追加
const addUser = (name: string, age: number) =>
    userList.value = [ ...userList.value, { name, age } ]
)

既存の配列である、userList...で分割し、addUser関数の引数で受け取ったnameとuserをオブジェクトの形で配列の最後に追加する。

今回わかったこと

WritableComputedRefな配列は、pushで変更しても検知しない❌

iCAREではフロントエンドエンジニアを募集しています!

Composition API、TypeScriptやGraphQLを使って型安全を保った開発をしています。
新しい技術やスキルを活かしたい方は→WantedlyもしくはTwitterのDMまでお願いします👍

https://www.wantedly.com/projects/549145