一、为什么选择 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 和 reactive
const { 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()创建响应式数据；使用
{{ }}将数据绑定到模板中。