P1 Why should COMPOSITION be used in VUe2

Vue3 comes out, Composition is much better than mixin, the path is clear, the file direction is clear, the SUPPORT for TS after mixin is great, but what about a lot of VUe2 components and a lot of VUe2 projects? Don’t worry! @vue/composition-api Here he comes with composition!

What is the P2@vue/composition-api

Click on the official website to see this note:

The vue2 plugin for composition is already clear. Great!

The degree to which P3 compares vue3 API

As you can see from the image above, the Vue3 API that he supports is pretty boring. As the most commonly used ref/computed/ref/ComputedRef/watch/watchEffect/defineComponent/onBeforeMount/onBeforeUnmount/reactive ah, It’s almost the same as VuE3. Most functions can be seamlessly transferred, except that some functions need to be compatible because the bottom 2 and 3 are different

What are the limitations of P4

P5 Practical use

Declare the composition of an exported table

import { dateFormatter } from "@kushim/kushim-util/common/date";
import { DownloadHTMLTableElement } from "@kushim/kushim-util/table";

function $(str: string) {
    const objE = document.createElement("div");
    objE.innerHTML = str;
    return objE.childNodes;
}

interface Th {
    style: string
    text: string
}

type Tr = (string | number) []export function useExportExcel() {

    function exportAsExcel({ ths, trs }: { ths: Th[], trs: Tr[] }, tableName: string, sheetName = "sheet1") {
        consttables = <HTMLTableElement[]><unknown>$( `<table> <thead> ${ths.map(_ => `<th style='${_.style}'>${_.text}</th>`).join("")} </thead> <tbody> ${trs.map((_, i) => `<tr style="border:1px solid #aaaaaa; background-color:${i % 2 === 0 ? "#eeeeee" : "#ffffff"}"> ${_.map(_ => `<td raw style='text-align:center; line-height:40px; white-space:pre; '> ${_} </td>` ).join("")} </tr>` ).join("")} </tbody> </table>`); DownloadHTMLTableElement( tables[0], `${tableName}[${dateFormatter(new Date(), "yyyy-MM-dd HH-mm-ss")}]`, sheetName ); } return { exportAsExcel } }Copy the code

Use it hard

<template> <div @click='exportAsExcel'> </div> </template>Copy the code

<script lang='ts'>
import {  defineComponent, ref, computed, onBeforeMount, watch, reactive} from "@vue/composition-api";

export default defineComponent({
    setup(props,ctx) {
        const list = ref([1.2.3.4.5.6.7.8.9.10])
        
        const doubleList = computed(() = > list.value.map(_= >_ *2))

        const { exportAsExcel } = useExportExcel();

        function exportExcel() {
            exportAsExcel(
                {
                    ths: [{text: "Serial number" }, { text: "Value"},].trs: doubleList.value.map((_, i) = >[ i + 1, _,])},"Exported double table"
            );
        }

        onBeforeMount(() = >{
            exportExcel()
        })

        watch(() = >list.value,(nv) = >{
            if(nv.length===0) return
            exportExcel()
        })

        setTimeout(() = >{
            list.value.push(99.98.97.96)},3000)

        return {
            list,
            doubleList,
            exportExcel
        }
    }
})
</script>
Copy the code

P6 Usage Suggestions

1. Use with typescript
2. Some CTX attributes of VUe2 are different from those of VUe3. You are advised to separate CTX attributes into functions to narrow the call entry for subsequent vue3 upgrade

For example, ctx.root and ctx.refs

P7 texture proof

1. Some common components

2. Project VUE and @vue/ composition-API versions