vue3 setup文件拆分、引入、响应式解构

使用setup语法糖开发时，我们会遇到页面个业务逻辑分离维护问题，在拆分业务逻辑代码的时候我们需要将拆分出来的逻辑代码用函数包装，并在引入时调用函数以生成执行上下文，再使用上下文中的数据，而对其中响应式数据进行解构时需要使用toRefs包裹，否则响应式失效。

//父级
<script lang="ts" setup>
import {useArticle} from './article'

const {articles} = toRefs(useArticle());
</script>


//拆分出的article.ts
export const useArticle = () => {
    ...
    const articles = reactive([]);
    ...
    
    return { articles };
}