Vue3的组合式API是使用setup函数来编写组件逻辑的。setup函数是Vue3中用于替代Vue2的选项API（如data、methods等）的一种方式。在setup函数中，你可以访问到一些特殊的响应式对象，并且可以返回一些可以在模板中使用的数据、方法等。
以下是一个文章列表示例，展示了如何在Vue3中使用组合式API的setup函数编写组件：
把所有代码都写在一个html文件
<!DOCTYPE html>
<html>
<head>
<title>Vue 3 CDN Example - Composition API</title>
<meta charset="utf-8">
<script src="vue.global.prod.min.js"></script>
<script src="vue-router.global.min.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script type="module">
const { createApp, ref } = Vue;
const { createRouter, createWebHashHistory } = VueRouter;
// 示例数据
const artcles = [
{ id: 100, title: '孤注一掷，玩的就是真实', content: '电影《孤注一掷》于8月8日正式上映，目前票房已破8亿。电影自点映以来口碑与票房狂飙，连破暑期档单日点映最高票房、中国影史单日点映票房、中国影史点映票房纪录，影片结尾部分更让不少观众认为会有续集。昨日在接受采访时，导演申奥明确表示不会有续集，"目前没有续集的计划，那个镜头主要想表达的就是，网络诈骗很难根除，层出不穷，还是需要我们提升自身的免疫力。"' },
{ id: 101, title: '《封神第一部》上映：网友被费翔的商务殷语洗脑了', content: '《封神第一部》主要讲述的是商王殷寿与狐妖妲己勾结，暴虐无道，引发天谴。昆仑仙人姜子牙携封神榜"下山，寻找天下共主，以救苍生。西伯侯之子姬发逐渐发现殷寿的本来面目，反出朝歌。' },
{ id: 102, title: '《消失的她》票房破35亿 排名中国票房榜第12', content: '《消失的她》由陈思诚监制，朱一龙、倪妮、文咏珊等主演的悬疑犯罪片。该片改编自前苏联电影《为单身汉设下的陷阱》，讲述了何非的妻子李木子在结婚周年旅行中离奇消失，失踪多天后一个陌生女人突然闯入，并坚称是何非妻子，从而牵扯出一个惊天大案的故事。' }
];
// 组件：文章列表
const ArtcleList = {
template: `
<div>
<h1>文章列表</h1>
<ul>
<li v-for="artcle in artcles" :key="artcle.id">
<router-link :to="'/artcle/' + artcle.id">{{ artcle.title }}</router-link>
</li>
</ul>
</div>
`,
setup() {
return {
artcles
};
}
};
// 组件：文章详情
const ArtcleDetail = {
template: `
<div>
<h1>{{ artcle.title }}</h1>
<p>{{ artcle.content }}</p>
</div>
`,
setup() {
const route = VueRouter.useRoute();
const artcleId = route.params.id;
const artcle = ref(artcles.find(artcle => artcle.id === Number(artcleId)));
return {
artcle
};
}
};
// 创建路由
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/', component: ArtcleList },
{ path: '/artcle/:id', component: ArtcleDetail }
]
});
// 创建Vue应用
const app = createApp({});
app.use(router);
// 挂载应用
app.mount('#app');
</script>
</body>
</html>
你也可以单独将js抽离出来
index.html
<!DOCTYPE html>
<html>
<head>
<title>Vue 3 CDN Example - Composition API</title>
<meta charset="utf-8">
<script src="vue.global.prod.min.js"></script>
<script src="vue-router.global.min.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script type="module" src="app.js"></script>
</body>
</html>
app.js
const { createApp, ref } = Vue;
const { createRouter, createWebHashHistory } = VueRouter;
// 示例数据
const artcles = [
{ id: 100, title: '孤注一掷，玩的就是真实', content: '电影《孤注一掷》于8月8日正式上映，目前票房已破8亿。电影自点映以来口碑与票房狂飙，连破暑期档单日点映最高票房、中国影史单日点映票房、中国影史点映票房纪录，影片结尾部分更让不少观众认为会有续集。昨日在接受采访时，导演申奥明确表示不会有续集，"目前没有续集的计划，那个镜头主要想表达的就是，网络诈骗很难根除，层出不穷，还是需要我们提升自身的免疫力。"' },
{ id: 101, title: '《封神第一部》上映：网友被费翔的商务殷语洗脑了', content: '《封神第一部》主要讲述的是商王殷寿与狐妖妲己勾结，暴虐无道，引发天谴。昆仑仙人姜子牙携封神榜"下山，寻找天下共主，以救苍生。西伯侯之子姬发逐渐发现殷寿的本来面目，反出朝歌。' },
{ id: 102, title: '《消失的她》票房破35亿 排名中国票房榜第12', content: '《消失的她》由陈思诚监制，朱一龙、倪妮、文咏珊等主演的悬疑犯罪片。该片改编自前苏联电影《为单身汉设下的陷阱》，讲述了何非的妻子李木子在结婚周年旅行中离奇消失，失踪多天后一个陌生女人突然闯入，并坚称是何非妻子，从而牵扯出一个惊天大案的故事。' },
{ id: 103, title: '电影《八角笼中》上映29天，票房突破21亿', content: '新京报讯 8月2日，电影《八角笼中》上映29天，累计票房突破21亿。该片由王宝强执导，王宝强、陈永胜、史彭元领衔主演，王迅、张祎曈主演，于7月6日正式上映。' },
{ id: 104, title: '速度与激情 10》8 月 18 日上线国内视频平台', content: '据 IT 之家此前报道，《速度与激情 10》今年 5 月在内地院线上映，比北美提前两天。目前，该片豆瓣评分 6.2。《速度与激情》系列电影由罗伯・科恩等执导，于 2001 年至 2021 年期间上映了 9 部。《速度与激情 9》于 2021 年 5 月 21 日在中国内地上映，2021 年 6 月 25 日在北美上映。' }
];
// 组件：文章列表
const ArtcleList = {
template: `
<div>
<h1>文章列表</h1>
<ul>
<li v-for="artcle in artcles" :key="artcle.id">
<router-link :to="'/artcle/' + artcle.id">{{ artcle.title }}</router-link>
</li>
</ul>
</div>
`,
setup() {
return {
artcles
};
}
};
// 组件：文章详情
const ArtcleDetail = {
template: `
<div>
<h1>{{ artcle.title }}</h1>
<p>{{ artcle.content }}</p>
</div>
`,
setup() {
const route = VueRouter.useRoute();
const artcleId = route.params.id;
const artcle = ref(artcles.find(artcle => artcle.id === Number(artcleId)));
return {
artcle
};
}
};
// 创建路由
const router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/', component: ArtcleList },
{ path: '/artcle/:id', component: ArtcleDetail }
]
});
// 创建Vue应用
const app = createApp({});
app.use(router);
// 挂载应用
app.mount('#app');
结构
演示
http://demo.likeyunba.com/vue3-composition-api/#/
源码下载
vue.global.prod.min.js
vue-router.global.min.js
下载地址：https://likeyun.lanzout.com/ibnQn14ymgud
作者
TANKING