当前位置：首页 > news >正文

Vue3 详解

news 2026/6/12 19:36:43

一、先给 Vue3 定个性：啥是 Vue3？

Vue3 是 2020 年发布的前端渐进式框架（最新稳定版是 Vue 3.4+），简单说就是帮你快速做网页 / APP 界面的 “工具包” —— 不用自己手写复杂的 DOM 操作、数据绑定逻辑，只需关注 “数据” 和 “界面” 的对应关系，Vue 会自动帮你处理界面更新，尤其适合做交互复杂的单页面应用（SPA），比如后台管理系统、电商页面、移动端 H5。

核心特点：轻量（体积更小）、快（性能提升 50%+）、灵活（支持组合式 API）、易上手（新手友好），是目前前端主流框架之一。

二、Vue3 核心优势（对比 Vue2，新手最该关注）

组合式 API（Composition API）：代码更易维护Vue2 用 “选项式 API”（data、methods、computed 分开写），复杂组件代码会 “散落在各处”；Vue3 的组合式 API（setup、ref、reactive）能把相关逻辑集中写在一起，比如 “用户登录” 的所有代码（数据、方法、校验）都放一块，新手改代码、查问题更清晰。
性能大幅提升
- 打包体积更小：比 Vue2 小约 40%，加载更快；
- 响应式系统重构：用 ES6 Proxy 替代 Object.defineProperty，支持监听数组下标、新增对象属性，不用再记 Vue2 的 “坑”；
- 渲染更快：编译优化后，页面更新时只重新渲染变化的部分，卡顿更少。
更好的 TypeScript 支持Vue3 本身用 TS 编写，新手写代码时能获得更精准的语法提示、错误检查，避免低级 bug，也适配大型项目的类型管理。
更灵活的组件复用新增 “组合式函数（Composables）”，可以把通用逻辑（比如表单校验、数据请求）抽成独立文件，多个组件直接复用，不用重复写代码。

三、Vue3 核心功能（新手入门必学，附极简代码）

1. 最基础：数据绑定（Hello World）

vue

<template><!-- 界面：绑定message变量 --><div>{{ message }}</div><button @click="changeMsg">点击修改文字</button>
</template><script setup>
// Vue3 推荐的 setup 语法糖（新手优先用）
// 1. 导入响应式变量方法
import { ref } from 'vue'// 2. 定义响应式变量（简单类型用ref）
const message = ref('Hello Vue3!')// 3. 定义方法
const changeMsg = () => {message.value = 'Vue3 太简单了！' // ref变量要通过.value修改值
}
</script>
 

关键：ref 用来定义简单类型（字符串、数字）的响应式变量，修改时要加 .value；
界面里直接写 {{ 变量名 }}，Vue 会自动同步数据和界面。

2. 常用：响应式对象（复杂数据）

vue

<template><div>姓名：{{ user.name }}</div><div>年龄：{{ user.age }}</div><button @click="addAge">年龄+1</button>
</template><script setup>
import { reactive } from 'vue'// 复杂类型（对象/数组）用reactive
const user = reactive({name: '张三',age: 20
})const addAge = () => {user.age++ // reactive对象不用.value，直接改
}
</script>
 

3. 核心：组件化（拆分页面）

Vue3 提倡把页面拆成多个 “组件”（比如导航栏、列表、按钮），复用性更强：

vue

<!-- 子组件：MyButton.vue -->
<template><button @click="$emit('click')">{{ btnText }}</button>
</template>
<script setup>
// 定义接收的参数
defineProps({btnText: {type: String,default: '默认按钮'}
})
</script><!-- 父组件：引用子组件 -->
<template><MyButton btnText="自定义按钮" @click="handleClick" />
</template>
<script setup>
// 导入子组件（Vue3 自动注册，不用写components）
import MyButton from './MyButton.vue'const handleClick = () => {alert('按钮被点击了！')
}
</script>
 

4. 常用：生命周期（控制组件执行时机）

Vue3 的生命周期钩子都能在 setup 里用，新手常用的：

vue

<script setup>
import { onMounted } from 'vue'// 组件挂载到页面后执行（比如请求数据）
onMounted(() => {console.log('组件加载完成，可以请求数据了')// 这里写axios请求、初始化逻辑等
})
</script>
 