一、 Vue3
操作 DOM 繁琐，需要频繁使用 document.getElementById、document.querySelector 获取元素，手动修改内容和样式
数据和视图不同步，数据变化后需要手动更新对应的 DOM 节点，容易出现状态不一致的 bug
没有统一的项目结构，不同开发者的代码风格差异大，团队协作效率极低
没有官方的路由和状态管理方案，复杂应用需要自己手动实现
声明式渲染，只需要描述数据和视图的对应关系，数据变化时视图自动更新
生态完善，官方提供 Element Plus、Vue Router、Pinia 等配套工具，覆盖所有开发场景
二、Vue3 开发环境搭建
1. 创建 Vue3 项目
启动成功后，浏览器打开即可看到 Vue3 的欢迎页面，修改代码后页面会自动刷新。
2. 集成 Element Plus
Element Plus 是 Vue3 生态最火的 UI 组件库，由饿了么团队开发，国内使用率第一，包含按钮、表单、表格、弹窗等 50 + 种常用组件。
3. 全局引入 Element Plus 和图标库
修改 src/main.js 文件，全局注册所有组件和图标：
4. Vue3 项目结构说明
三、Vue3 核心概念
1. 响应式数据
响应式是 Vue3 最核心的特性，数据变化时视图会自动更新，不需要手动操作 DOM。
| | | |
|---|
| | | |
| | const user = reactive ({name: ' 张三 '}) | |
2. 常用指令
Vue 指令是带有 v - 前缀的特殊属性，用于扩展 HTML 的功能。
v-model：双向数据绑定，表单元素和数据同步更新
v-for：循环渲染列表，遍历数组或对象
v-if：条件渲染，根据条件显示或隐藏元素
v-show：条件显示，通过 CSS 的 display 属性控制元素显示
@click：绑定点击事件
:class：动态绑定 class 属性
:style：动态绑定 style 属性
3. 计算属性 computed
计算属性用于根据其他数据计算出一个新的值，会缓存计算结果，只有依赖的数据发生变化时才会重新计算。
4. 侦听器 watch
侦听器用于监听某个数据的变化，当数据变化时执行指定的操作，比如发送网络请求、修改其他数据。
5. 组件化开发
组件化是 Vue 的核心思想，把一个大页面拆分成多个小的、独立的组件，每个组件负责自己的功能，便于复用和维护。
定义子组件
在 src/components 文件夹下创建 ProductCard.vue 文件：四、实战计数器应用
五、实战完整电商商品列表
六、项目打包上线
开发完成后，在终端执行以下命令，Vite 会自动对代码进行压缩、打包，生成生产环境可用的代码：执行完成后，项目根目录会生成一个 dist 文件夹，里面包含了所有的 HTML、CSS、JS 文件，将 dist 文件夹中的内容上传到任何静态文件服务器（比如 Nginx、Apache、阿里云 OSS）即可完成部署。
七、总结
Vue3 开发环境搭建：用 Vite 快速创建项目，集成 Element Plus 和图标库响应式数据：ref 用于基本数据类型，reactive 用于对象和数组常用指令：v-model、v-for、v-if、@click 等，扩展 HTML 功能计算属性 computed：缓存计算结果，提高性能侦听器 watch：监听数据变化，执行副作用操作组件化开发：拆分页面为独立组件，实现代码复用和维护父子组件通信：父传子用 props，子传父用 emit项目打包上线：npm run build 生成 dist 文件夹，部署到静态服务器大家有任何不懂的地方，或者敲代码遇到了 bug，都可以在评论区留言，我都会一一回复。如果这篇内容对你有帮助，别忘了点赞、在看、转发给身边同样在学网页设计的朋友。
