• 模块化的开发方式可以提高代码复用率，方便进行代码的管理。
• 通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。

场景一

导出常量

const x = ref(0)

const update = () => {
    x.value++
}

export const tableColumn = [
    {
        label: '点击次数',
        slot: {
            default: () => x.value,
        },
    },
    {
        label: '操作',
        slot: {
            default: () => {
                return (
                    <div>
                        <el-button
                            link
                            type="primary"
                            class="operation-pointer"
                            onClick={update}
                        >
                            点击
                        </el-button>
                    </div>
                )
            },
        },
    },
]

export function addColumn() {
    tableColumn.unshift({
        label: '序号',
        type: 'index',
    })
}

总结

1. x和tableColumn，只在文件加载时，初始化一次，属于全局单例，当A和B页面都引用tableColumn时，A的操作会影响B页面
2. tableColumn初始化时，不能加逻辑，比如传入一个type，为0的时，第一列文本为“点击次数”，type为1时，第一列文本为“点击数”

场景二

导出工厂函数

export const getTableColumn = (type) => {
    // 这里不能用onMounted等钩子，因为无法确保getTableColumn的函数在vue的setup钩子阶段执行
    ...
    const x = ref(0)

    const update = () => {
        x.value++
    }

    return [
        {
            label: type === 1 ? '点击数' : '点击次数',
            slot: {
                default: () => x.value,
            },
        },
        {
            label: '操作',
            slot: {
                default: () => {
                    return (
                        <div>
                            <el-button
                                link
                                type="primary"
                                class="operation-pointer"
                                onClick={update}
                            >
                                点击
                            </el-button>
                        </div>
                    )
                },
            },
        },
    ]
}

总结

1. 将导出常量tableColumn改为导出getTableColumn工厂方法，可以解决多次引用时候，数据相互影响的问题
2. 灵活度更高，可以在数据初始化时添加一些逻辑处理

场景三

导出组合式函数

import { onMounted, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'

export const useTable = () => {
    const route = useRoute()
    const x = ref(0)

    const update = () => {
        route.query.a === 'a' ? x.value++ : x.value--
    }

    onMounted(() => {
        // ...
    })

    onBeforeUnmount(() => {
        // ...
    })

    const getTableColumn = (type) => {
        return [
            {
                label: type === 1 ? '' : '点击次数',
                slot: {
                    default: () => x.value,
                },
            },
            {
                label: '操作',
                slot: {
                    default: () => {
                        return (
                            <div>
                                <el-button
                                    link
                                    type="primary"
                                    class="operation-pointer"
                                    onClick={update}
                                >
                                    点击
                                </el-button>
                            </div>
                        )
                    },
                },
            },
        ]
    }
    return {
        getTableColumn,
    }
}

总结

1. 使用组合式函数可以使用Vue的组合式API，灵活度更高，可维护性更好
2. 虽然从技术上，组合式函数可以在任何地方调用，但根据官方规范，组合式函数必须在Vue的setup钩子函数内执行，才能100%正常工作

结论

1. 在vue3的开发中，优先使用组合式函数定义可复用的配置或逻辑
2. 如需一部分数据状态在多个组件中共享，可以创建一个js文件，定义响应式数据，然后导入到多个组件中