网上讨论的文章已经很多了，这里举一个简单的例子来讨论一下 Composition API 的用法，具体问题才好具体讨论嘛。
假如我们要做一个论坛的讨论列表和分页，以前是把需要的数据都放在data里面，事件都放在methods 里面，代码少的话还好分辨，如果代码多了，看着就头疼了。
现在vue3.0可以按照业务关系分成多个管理类来管理这些代码。
假如我们要做一个论坛的讨论列表和分页，以前是把需要的数据都放在data里面，事件都放在methods 里面，代码少的话还好分辨，如果代码多了，看着就头疼了。
现在vue3.0可以按照业务关系分成多个管理类来管理这些代码。比如帖子列表+发帖功能，我们先做一个模板：
（简单表示一下，不做美化处理了）

上面的模板部分没有啥区别，变化部分在js代码。
我们可以先写一个帖子列表的管理类，包含帖子列表的数据，和依据页号加载数据的方法。代码如下：
// 帖子列表的管理类
const manageArticleList = () => {
const articleList = ref([
{
title: '这是帖子',
viewCount: 100,
sendTime: '2021-10-20'
}
])

// 依据页号加载帖子列表
const loagActicleListByPage = (pageIndex) => {
// alert(pageIndex)
articleList.value = [
{
title: '这是新加载的帖子帖子',
viewCount: 100 + parseInt(pageIndex),
sendTime: '2021-10-20'
}
]
}

return {
articleList,
loagActicleListByPage
}
}
// 帖子列表的管理类
const manageArticleList = () => {
const articleList = ref([
{
title: '这是帖子',
viewCount: 100,
sendTime: '2021-10-20'
}
])

// 依据页号加载帖子列表
const loagActicleListByPage = (pageIndex) => {
// alert(pageIndex)
articleList.value = [
{
title: '这是新加载的帖子帖子',
viewCount: 100 + parseInt(pageIndex),
sendTime: '2021-10-20'
}
]
}

return {
articleList,
loagActicleListByPage
}
}再写一个分页的管理类（使用antdv的a-pagination），代码如下
// 分页管理类
const manageActiclePage = () => {
const acticleCurrent = ref(0)

return {
acticleCurrent
}
}
// 分页管理类
const manageActiclePage = () => {
const acticleCurrent = ref(0)

return {
acticleCurrent
}
}最后我们可以在setup里面把这两个管理类给结合起来，一起返回给view。
export default {
setup () {
// 引入查询管理
const { articleList, loagActicleListByPage } = manageArticleList()
// 引入分页管理
const { acticleCurrent } = manageActiclePage()

// 监听页号变化，加载数据
watch(acticleCurrent, (newValue, oldValue) => {
loagActicleListByPage(newValue)
})
// 返回给view
return {
articleList,
acticleCurrent,
}
}
}
export default {
setup () {
// 引入查询管理
const { articleList, loagActicleListByPage } = manageArticleList()
// 引入分页管理
const { acticleCurrent } = manageActiclePage()

// 监听页号变化，加载数据
watch(acticleCurrent, (newValue, oldValue) => {
loagActicleListByPage(newValue)
})
// 返回给view
return {
articleList,
acticleCurrent,
}
}
}在setup里面，监听 acticleCurrent 页号变化，调用 manageArticleList 的 loagActicleListByPage 事件，加载数据。
当然也可以有其他的组合方式，这里只是举个简单的例子。这样代码可以根据业务逻辑分散开，便于扩展和维护，比如我们要加一个查询功能，那么可以在 manageArticleList 里面加个 loagActicleListByQuery 的事件。最后的效果就是，代码依据业务逻辑，完全分散成多个管理类，setup只需要负责加载和整合即可，setup里面也不会有很多代码。管理类应该可以写在单独的js文件里面，比如我们把表单的js代码写在单独的js文件里面：(bbs-manageArticleForm.js)
import { ref } from 'vue'

// 帖子列表的管理类
export function manageArticleForm () {
const modelForm = ref(
{
title: '这是帖子标题',
content: '帖子内容',
sendTime: '2021-10-20'
}
)
// 依据页号加载帖子列表
const sendArticle = () => {
// 调用axios 向后端提交
alert('假装发表成功了。。。')
}
return {
articleForm: modelForm,
sendArticle
}
}
import { ref } from 'vue'

// 帖子列表的管理类
export function manageArticleForm () {
const modelForm = ref(
{
title: '这是帖子标题',
content: '帖子内容',
sendTime: '2021-10-20'
}
)
// 依据页号加载帖子列表
const sendArticle = () => {
// 调用axios 向后端提交
alert('假装发表成功了。。。')
}
return {
articleForm: modelForm,
sendArticle
}
}然后在views里面用import引入import { manageArticleForm } from './bbs-manageArticleForm.js'import { manageArticleForm } from './bbs-manageArticleForm.js'在setup里面设置如下：
setup() {
......
// 表单
const { articleForm, sendArticle } = manageArticleForm()

// 返回给view
return {
......
articleForm,
sendArticle,
......
}
}
setup() {
......
// 表单
const { articleForm, sendArticle } = manageArticleForm()

// 返回给view
return {
......
articleForm,
sendArticle,
......
}
}写在单独的js文件里面，意味着可以复用。不仅这里可以用，其他的地方也可以直接拿过来用。好吧，这个表单基本没啥可以好复用的，这里只是举个例子。以上就是vue3.0 的 Composition API 的使用示例的详细内容，关于vue3.0 的 Composition API 的资料请关注其它相关文章！