vue2 ではミックスイン (ミックスイン) を使用し、vue3 ではコンポーザブルを使用する

---

1.ミックスインを混ぜる

1. 新しい mixins フォルダーを作成し、新しい myMixins.js を作成します

src --> ミックスイン --> myMixins.js

2.myMixins.js ファイル

その中では、データ、メソッド、ウォッチが vue ファイルのように使用されます...

3.index.vueファイル（使用するファイル）

ミックスインで混ぜたいファイルですので、そのファイルをインポートして登録すれば利用できるようになります。

ミックスインの概要

利点: 異なるコンポーネントがミックスインを導入すると、異なるインスタンスが生成され、データは相互に影響を与えることなく互いに分離されます。 注: 1: ミックスインが導入されると、コンポーネントは繰り返し定義され、ミックスイン内のプロパティ
メソッド
は上書きされます。
2: ミックスインを使用すると、コンポーネントにはミックスイン内のすべてのデータが含まれ、これを使用してアクセスできるようになります。

2、コンポーザブル (結合された API 構成)

1. 新しいコンポーザブル フォルダーを作成し、新しい useEdit.js を作成します。

useEdit.js はリスト編集ページであり、編集ロジックをコンポーザブルに分割して API
ファイル パスを結合します: src --> composables–> useEdit.js

2.Edit.js ファイルを使用する

内部には編集されたデータとメソッドが含まれています。需要用return将方法返回出去。因为是一个函数嘛。

// 编辑页
export default function useEdit(router) {
    
    
    // 编辑页面的数据
    const editData = reactive({
    
    
        name: '',
        age: 18,
        data: {
    
    },
    });
    // 返回年龄的方法
    function getAge () {
    
    
        return '今年' + editData.age +'岁了。'
    };
    return {
    
    
        editData,
        getAge,
    }
}

3.index.vueファイル（使用するファイル）

以下は import () の方法を直接示した疑似コードです。解构赋值的方式引用後、index.vue ページ上でインポートされたメソッドを自由に使用できます。

<script setup lang="ts">
import useEdit from '../composables/useEdit'
const route = useRoute();
// 编辑页面的逻辑
// router 就是跳转路由的，可以作为参数传到函数中进行使用
const {
    
     editData,  getAge,} = useEdit(router);
</script>

<template>
    <div></div>
</template>

<style lang="less" scoped>
</style>

コンポーザブルの概要

要約する

一般に、vue3 のコンポーザブルと vue2 のミックスインは同様に使用され、どちらも関数 return を通じて定義されたデータを返し、それをindex.vue (つまり、使用したいページ、複数のページ). 直接使用されるデータを分割する方法。
利点については同じです:不同组件引入 mixins / composable 之后，会生成不同的实例，数据会相互隔离，互不影响。