Utilice mixins (mezclados) en vue2 y componibles en vue3

---

1. mixins mezclados

1. Cree una nueva carpeta mixins y cree un nuevo myMixins.js

src --> mixins --> myMixins.js

2. Archivo myMixins.js

En él, los datos, el método, el reloj se utilizan como archivos vue...

3. archivo index.vue (el archivo que se utilizará)

Significa que desea usar mixins para mezclar el archivo, importar y registrar el archivo, y puede usarlo.

resumen de mixins

Ventajas: después de que diferentes componentes introducen mixins, se generarán diferentes instancias y los datos se aislarán entre sí sin afectarse entre sí. Nota:
1
: Cuando se introducen mixins, los componentes se definen repetidamente y los métodos de propiedad en los mixins será sobrescrito.
2: Después de usar mixins, el componente contiene todos los datos en los mixins y se puede acceder a ellos usando este.

Dos, componibles (composición de API combinada)

1. Cree una nueva carpeta de elementos componibles y cree un nuevo useEdit.js

useEdit.js es una página de edición de listas y luego divide la lógica de edición en
la ruta del archivo API combinada de componibles: src --> componibles–> useEdit.js

2. use el archivo Edit.js

Dentro se encuentran los datos y métodos editados, cabe señalar que:需要用return将方法返回出去。因为是一个函数嘛。

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

3. archivo index.vue (el archivo que se utilizará)

Aquí hay un pseudocódigo que muestra directamente cómo importar ( 解构赋值的方式). Después de citar, puede usar libremente el método importado en la página 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>

Resumen componible

Resumir

En términos generales, el uso de componible de vue3 y mixins de vue2 es casi el mismo: ambos devuelven los datos definidos a través de la función return y puedes importarlos en index.vue (es decir, la página que deseas usar, que puede tener varias páginas) Una forma de dividir datos que se utiliza directamente.
En cuanto a las ventajas son las mismas:不同组件引入 mixins / composable 之后，会生成不同的实例，数据会相互隔离，互不影响。