Vue 3 学习笔记：从入门到核心概念

一、Vue 3 简介与优势Vue 3 是 Vue.js 框架的重大版本更新于 2020 年 9 月正式发布。它带来了全新的Composition API、更好的 TypeScript 支持、更小的打包体积以及更高的性能。主要优势Composition API提供更灵活的逻辑复用方式解决了 Options API 在复杂组件中逻辑分散的问题。性能提升基于 Proxy 的响应式系统初始渲染和更新速度更快内存占用更少。更好的 TypeScript 支持源码使用 TypeScript 重写提供完整的类型定义。更小的体积通过 Tree-shaking 优化核心库体积减少约 40%。新的内置组件如Teleport、Suspense等。二、快速开始创建 Vue 3 项目推荐使用 Vite 创建 Vue 3 项目速度更快配置更简单。# 使用 npm npm create vuelatest 或使用 yarn yarn create vue 根据提示选择项目配置TypeScript、Router、Pinia 等项目创建完成后进入项目目录并安装依赖cd your-project-name npm install npm run dev三、核心概念Composition API 与响应式1. 响应式基础ref 与 reactiveVue 3 使用ref和reactive创建响应式数据。script setup import { ref, reactive } from vue // ref 用于基本类型也可用于对象 const count ref(0) const user ref({ name: John }) // reactive 用于对象 const state reactive({ message: Hello Vue 3, list: [1, 2, 3] }) // 访问 ref 的值需要使用 .value console.log(count.value) // 0 count.value // reactive 对象直接访问 console.log(state.message) // Hello Vue 3 /script2. 计算属性与侦听器script setup import { ref, computed, watch } from vue const firstName ref(张) const lastName ref(三) // 计算属性 const fullName computed(() { return firstName.value lastName.value }) // 侦听器 watch(fullName, (newValue, oldValue) { console.log(全名从 ${oldValue} 变为 ${newValue}) }) // 立即执行的侦听器 watch(fullName, (newValue) { console.log(当前全名${newValue}) }, { immediate: true }) /script四、组件开发与通信1. 组件定义与使用!-- ChildComponent.vue -- template div h3子组件/h3 p接收的消息{{ message }}/p button clickemitEvent触发事件/button /div /template script setup // defineProps 和 defineEmits 是编译器宏无需导入 const props defineProps({ message: { type: String, default: 默认消息 } }) const emit defineEmits([custom-event]) const emitEvent () { emit(custom-event, 来自子组件的数据) } /script!-- ParentComponent.vue -- template div h2父组件/h2 ChildComponent :messageparentMessage custom-eventhandleEvent / /div /template script setup import { ref } from vue import ChildComponent from ./ChildComponent.vue const parentMessage ref(来自父组件的消息) const handleEvent (data) { console.log(收到子组件事件, data) } /script2. 插槽Slots!-- SlotComponent.vue -- template div classcard header slot nameheader默认标题/slot /header main slot默认内容/slot /main footer slot namefooter/slot /footer /div /template!-- 使用插槽 -- SlotComponent template #header h2自定义标题/h2 /template p这是自定义内容/p template #footer button确定/button /template /SlotComponent五、状态管理PiniaPinia 是 Vue 3 官方推荐的状态管理库比 Vuex 更简洁、类型安全。// stores/counter.js import { defineStore } from pinia export const useCounterStore defineStore(counter, { state: () ({ count: 0 }), getters: { doubleCount: (state) state.count * 2 }, actions: { increment() { this.count }, async incrementAsync() { await new Promise(resolve setTimeout(resolve, 1000)) this.count } } })// 在组件中使用 script setup import { useCounterStore } from /stores/counter const counter useCounterStore() // 访问状态 console.log(counter.count) // 使用 getter console.log(counter.doubleCount) // 调用 action counter.increment() /script六、路由管理Vue Router 4// router/index.js import { createRouter, createWebHistory } from vue-router import Home from ../views/Home.vue import About from ../views/About.vue const routes [ { path: /, name: Home, component: Home }, { path: /about, name: About, component: About, meta: { requiresAuth: true } } ] const router createRouter({ history: createWebHistory(), routes }) // 导航守卫 router.beforeEach((to, from, next) { if (to.meta.requiresAuth !isAuthenticated()) { next(/login) } else { next() } }) export default router七、常用 API 与技巧1. 生命周期钩子script setup import { onMounted, onUpdated, onUnmounted } from vue onMounted(() { console.log(组件挂载完成) }) onUpdated(() { console.log(组件更新完成) }) onUnmounted(() { console.log(组件卸载) }) /script2. 模板引用Template Refstemplate input refinputRef typetext / button clickfocusInput聚焦输入框/button /template script setup import { ref, onMounted } from vue const inputRef ref(null) const focusInput () { inputRef.value?.focus() } onMounted(() { // 组件挂载后 DOM 元素才可用 console.log(inputRef.value) // input typetext }) /script八、最佳实践与常见问题1. 性能优化使用v-once渲染静态内容使用v-memoVue 3.2缓存模板片段合理使用计算属性避免在模板中进行复杂计算组件懒加载defineAsyncComponent2. 常见问题响应式丢失解构 reactive 对象会失去响应性使用toRefs循环引用避免在响应式对象中创建循环引用内存泄漏及时清理事件监听器和定时器九、学习资源推荐官方文档Vue.js - The Progressive JavaScript Framework | Vue.js英文中文文档Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue Mastery付费视频课程质量很高Vue School免费和付费课程GitHub 仓库vuejs/core