Open2022/05/29にコメント追加1

Vue3のComposition APIを使う時は双方向データバインディングをやめた方がよくない？という話

JavaScript

TypeScript

Vue.js

双方向データバインディング

からころ 2022/05/29に更新

前提

まず、Vue3をVue2と同じ要領で利用すると、保守性の観点で大変なことになります。
双方向データバインディングのメリットはもちろんあるのですが、Vue3になって、より複雑になったデータフローは保守性を掻き乱す要因になることでしょう。チーム開発を行うにあたって、基本的には単方向データフローで処理を書いていくのがいいのかなと個人的には思っていますという前提で下記にアンチパターンを列挙していきます。

何か質問や間違いなどありましたら、返信でコメントお願いします。

双方向データバインディングのアンチパターン集（随時追加します）

watchEffect()が設定されたreactiveな値を子コンポーネントのpropsに渡す

親コンポーネント

<template>
  ...
 <Child :count="count" />
 <button @click="increment()">+</button>
 <button @click="decrement()">-</button>
  ...
</template>

<script setup lang="ts">
import { reactive, watchEffect } from 'vue'
import Child from '@/component/Child'

const count = reactive({ value: 0 })
const incriment = () => {
  count.value = count.value++
}
const decrement = () => {
  count.value = count.value--
}
watchEffect(() => {
  if (count.value < 0) {
    count.value = 0
  }
})
</script>

子コンポーネント

<template>
  ...
  <p>{{ count }}></p>
  ...
</template>

<script setup lang="ts">
import { defineProps, reactive } from 'vue'

const props = defineProps({
  count: {
    type: Number,
    required: true,
  },
})

// このスコープでprops.countが動的に変化するのを把握するのは難しいため思わぬ不具合につながります。

</script>