Vue.jsのハマりどころ

概要

• 2年くらいVueで開発してるけど、いまだにハマるポイントを書いた
• これから、Vueの開発をする or している人の参考になればと思います！

propsされた値をv-modelに渡したい

• 親から渡されたデータを子コンポーネントにv-modelで渡したい時
  • ついつい、v-modelでそのまま渡したくなるが、禁物
  • v-modelは、直接データを書き換えてしまう！
• computedするパターンが多い
  • computedはgetsetの両方を書ける

export default {
  props: {
    hoge: {
      type: String,
      required: true
    }
  },
  computed: {
    hogeHoge: {
      get() {
         return this.hoge
      },
      set(value) {
         this.$emit('input', value)
      }
    }
  }
}

• また、上記コンポーネントを呼び出す際は以下のようにする
  • v-model="hoge"は以下のコードと同義のsyntax suger
    • :value="hoge" @input="hoge=value"

親コンポーネント

<template>
  <clild-component v-model="hoge" />
</template>

// 上記と同義
<template>
  <child-component :value="hoge" @input="hoge=value">
</template>

コンポーネントを再表示するとデータが消える or 不要なデータが残る

• v-ifなどで表示を切り替えする際に、よく起きる
• メモリ上にDOMが残っていることが原因
  • 一見、データが消えたように見えても、メモリ上では保持している
• たいていの場合、created内で、propsされた値をDataに移し替えていることが多い

解決策として

• propsされた値はコンポーネント中では持たず、computedで保持する
  • emitで更新する！
• Vuexを使う