新Vue.js「Vue 3」でコンポーネント実装法を大きく変える「Composition API」

vue create <プロジェクト名> # Vue CLIでプロジェクトを生成    ...（1）
cd <プロジェクト名>         # プロジェクトのフォルダーに移動 ...（2）
vue add vue-next            # プロジェクトをVue 3対応        ...（3）

<template>
  <div>
    <h4>iOS: {{ countIOS }} 機種</h4>
    <ul>
      <li v-for="(elem, index) in iOS" v-bind:key="index">
        {{ elem }}
      </li>
    </ul>
（略：Android機種数とリスト、総機種数）
    <div>
      <input v-model="newIOS" placeholder="iOS機種">
      <button @click="addNewIOS">追加</button>
    </div>
（略：Android機種のテキストボックスと追加ボタン）
  </div>
</template>
<script>
export default {
  // データ ...（1）
  data() {
    return {
      iOS: ['iPhone 11'],         // iOS機種のリスト
      newIOS: '',                 // iOS機種のテキストボックス内容
      android: ['Galaxy S20 5G'], // Android機種のリスト
      newAndroid: ''              // Android機種のテキストボックス内容
    }
  },
  // メソッド ...（2）
  methods: {
    // iOS機種を追加
    addNewIOS() {
      this.iOS.push(this.newIOS)
      this.newIOS = ''
    },
（略：Android機種を追加するaddNewAndroid）
  },
  // 算出プロパティ ...（3）
  computed: {
    // iOS機種数
    countIOS() {
      return this.iOS.length
    },
（略：Android機種数を取得するcountAndroid、総機種数を取得するcountTotal）
  }
}
</script>

export default {
  // コンポーネント設定処理 ...（1）
  setup() {
    // reactiveでデータを記述 ...（2）
    const state = reactive({
      iOS: ['iPhone 11'],
      newIOS: '',
      android: ['Galaxy S20 5G'],
      newAndroid: ''
    })
    // メソッド ...（3）
    function addNewIOS() {
      state.iOS.push(state.newIOS)
      state.newIOS = ''
    }
（略：Android機種を追加するaddNewAndroid）
    // 算出プロパティ ...（4）
    const countIOS = computed(function() {
      return state.iOS.length
    })
（略：Android機種数を取得するcountAndroid、総機種数を取得するcountTotal）
    // ここまで定義してきた内容を返却 ...（5）
    return {
      state, addNewIOS, addNewAndroid, countIOS, countAndroid, countTotal
    }
  }
}

<li v-for="(elem, index) in state.iOS" v-bind:key="index">
  {{ elem }}
</li>

setup() {
  // refでデータを記述 ...（1）
  const iOS = ref(['iPhone 11'])
  const newIOS = ref('')
  const android = ref(['Galaxy S20 5G'])
  const newAndroid = ref('')
  // メソッド ...（2）
  function addNewIOS() {
    iOS.value.push(newIOS.value)
    newIOS.value = ''
  }
（略：addNewAndroidメソッド、算出プロパティ）
  // ここまで定義してきた内容を返却 ...（3）
  return {
    iOS, newIOS, android, newAndroid,
（略：メソッド、算出プロパティ）
  }

<li v-for="(elem, index) in iOS" v-bind:key="index">
  {{ elem }}
</li>

setup() {
  // reactiveでデータを記述
  const state = reactive({
    iOS: ['iPhone 11'],
    newIOS: '',
    android: ['Galaxy S20 5G'],
    newAndroid: ''
  })
（略：メソッド、算出プロパティ）
  // ここまで定義してきた内容を返却
  return {
    ...toRefs(state), // stateの内容をrefに変換 ...（1）
（略：メソッド、算出プロパティ）
  }
}

import { reactive, computed, toRefs } from 'vue'
export default function PhonesLogic(initialList) {
  // reactiveでデータを記述
  const state = reactive({
    terminals: initialList,
    newTerminal: ''
  })
  // メソッド
  function addNew() {
    state.terminals.push(state.newTerminal)
    state.newTerminal = ''
  }
  // 算出プロパティ
  const count = computed(function () {
    return state.terminals.length
  })
  // ここまで定義してきた内容を返却
  return {
    ...toRefs(state), addNew, count
  }
}

setup() {
  // PhoneLogicでiOS/Androidの各処理ロジックを生成 ...（1）
  const iOSLogic = PhonesLogic(['iPhone 11'])
  const androidLogic = PhonesLogic(['Galaxy S20 5G'])
  // 総端末数を計算する算出プロパティ ...（2）
  const countTotal = computed(function() {
    return iOSLogic.count.value + androidLogic.count.value
  })
  // ここまで定義してきた内容を返却 ...（3）
  return {
    iOSLogic, androidLogic, countTotal
  }
}

<template>
  <div class="one-phone">
    <h3>{{ fullName }}</h3>
    <div>機種名：{{ name }}</div>
    <div>メーカー：{{ vendor }}</div>
    <div>重量：{{ weight }}g</div>
  </div>
</template>
<script>
export default {
  // プロパティの設定 ...（1）
  props: {
    name: String,
    vendor: String,
    weight: Number
  },
  // 算出プロパティ ...（2）
  computed: {
    fullName() {
      // thisでプロパティを参照 ...（3）
      return this.vendor + '：' + this.name
    }
  },
  // mountedライフサイクルフック ...（4）
  mounted() {
    console.log('コンポーネントがマウントされました')
  }
}
</script>

export default {
  // プロパティの設定 ...（1）
  props: {
    name: String,
    vendor: String,
    weight: Number
  },
  // setupメソッドの引数propsにプロパティが含まれる ...（2）
  setup(props) {
    // 算出プロパティ ...（3）
    const fullName = computed(function() {
      // propsでプロパティを参照 ...（4）
      return props.vendor + '：' + props.name
    })
    // onMountedライフサイクルフック ...（5）
    onMounted(function() {
      console.log('コンポーネントがマウントされました')
    })
    return {
      fullName
    }
  }
}