Vue3にしてComposition Apiを使う理由

Vueを使うならComposition Apiに書き方を変えることをお勧めします。

自分はVue3に変えComposition Apiを使うようになり、ソースコードがかなり機能ごとに作れるようになったと思っています。

ja.vuejs.org

具体例

export default {
  data(){
    return {
        dialog: false,
        dialog_delete: false,
    }
  },
  methods: {
    openDialog() {
        this.dialog = true;
    },
    closeDialog() {
        this.dialog = false;
    },
    openDeleteDialog() {
        this.dialog_delete = true;
    },
    closeDeleteDialog() {
        this.dialog_delete = false;
    },
  },
}

export default {
  setup(){
    const editDialog = EditDialog()
    const deleteDialog = DeleteDialog()

    return {
        editDialog, deleteDialog
    }
  }
}

const EditDialog = {
    const dialog = ref(false)

    const open = () => {
        dialog.value = true
    }

    const close = () => {
        dialog.value =false
    }

    return {
        dialog,
        open, close,
    }
}

const CloseDialog = {
    const dialog = ref(false)

    const open = () => {
        dialog.value = true
    }

    const close = () => {
        dialog.value =false
    }

    return {
        dialog,
        open, close,
    }
}

機能ごとのコードに分割できるため、コードが長い場合でも理解しやすい状況になったと思います。

長いdataを作らなくて良いコードになりました。

vue2 -> vue3

OptionApiも使うことができるため、コードを大幅に変更しなくても変更することは可能だと思います。ただプラグイン周りには影響がでている可能性があるため慎重にアップデートする必要はあると思います。

アップデートする価値があるぐらいにいい変更だと感じています。