Vue3 Composition API如何实现逻辑提取与复用详解？

本文共计1275个文字，预计阅读时间需要6分钟。

Vue3+Composition API可在大型项目中更好地组织代码。使用多种选项属性切换到单一的setup+方法，让多开发人员面对的问题更清晰，因为一切都在一个地方。

Vue3 Composition API可以在大型项目中更好地组织代码。然儿，随着使用几种不同的选项属性切换到单一的setup 方法，许多开发人员面临的问题是……

这会不会更混乱，因为一切都在一个方法中

乍一看可能很容易，但是实际上只需要花一点点时间来编写可重用的模块化代码。

让我们来看看如何做到这一点。

问题

Vue.js 2.x 的 Options API 是一种非常直观的分隔代码的方法

export default { data () { return { articles: [], searchParameters: [] } }, mounted () { this.articles = ArticlesAPI.loadArticles() }, methods: { searchArticles (id) { return this.articles.filter(() => { // 一些搜索代码 }) } } }

问题是，如果一个组件中有数百行代码，那么就必须在多个部分data、methods、computed等中为单个特性(例如搜索)添加代码。

这意味着仅一项功能的代码可能会分散分布在数百行中，并分布在几个不同的位置，从而使其难以阅读或调试。