Vue 3（1） 用 Composition API 写一个简单的应用
一、为什么选择 Vue 3？
Vue 是一个轻量、灵活且功能强大的前端框架，Vue 3 相比 Vue 2 在性能和代码组织方式上有了显著提升，尤其是引入了 Composition API，提升了逻辑复用和可维护性。
二、准备工作
我们使用的是浏览器中的 CDN 引入方式，不需要任何构建工具或安装环境，非常适合初学者练手。
1. 引入 Vue 3
<script src="vue.global.js"></script>你可以去 Vue 官网 获取最新版的 CDN 链接。
三、第一个 Vue 应用实例
HTML + Vue 代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 入门案例</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app">{{ message }}<h1>{{ web.title }}</h1><h2>{{ web.url }}</h2></div><script>// 从 Vue 全局对象中解构出 createApp 和 reactiveconst { createApp, reactive } = Vue// 创建 Vue 应用createApp({// setup 是 Composition API 的核心函数，用于初始化组件数据setup() {// 使用 reactive 创建一个响应式对象const web = reactive({title: "theodore的博客",url: "https://blog.csdn.net/Theodore_1022"})// 返回给模板使用的变量return {message: "Hello Vue 3！",web}}}).mount("#app") // 将应用挂载到 HTML 中的 #app 容器</script>
</body>
</html>
四、代码解析
1. createApp
这是 Vue 3 创建应用的入口函数，类似于 Vue 2 的 new Vue(...)。
2. setup()
Vue 3 的 Composition API 所有逻辑的开始，里面写你的数据、方法等。
3. reactive()
将一个普通对象转换为响应式对象。页面上的数据绑定会自动监听这个对象的变化。
4. {{ }} 插值语法
Vue 模板语法，双大括号用于显示数据。
五、运行效果
运行后，你会看到页面展示如下内容：
六、总结
这是一个最基本的 Vue 3 项目结构和响应式应用实例：
-
使用
createApp()创建 Vue 应用； -
使用
setup()来定义组件逻辑； -
使用
reactive()创建响应式数据； -
使用
{{ }}将数据绑定到模板中。