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

Vue3理论速学

news 2026/3/26 21:50:26

这是一份专为 2026 年 开发者准备的 Vue 3 理论速学指南。摒弃过时的 Vue 2 写法，直接切入现代 Vue 开发的核心（Composition API + <script setup>）。

🚀 一、核心思维转变：从“选项”到“组合”

特性	Vue 2 (Options API)	Vue 3 (Composition API)	为什么变？
代码组织	按选项分类 (`data`, `methods`, `mounted`)	按逻辑功能分类 (所有关于“搜索”的代码在一起)	解决大组件逻辑分散问题，易于复用。
响应式原理	`Object.defineProperty`	`Proxy`	性能提升巨大，支持数组/对象深层监听，无死角。
语法糖	无	`<script setup>`	代码更少，无需 `return`，原生支持 TypeScript。
状态管理	Vuex	Pinia	更轻量，去除了 `mutation`，对 TS 支持完美。

💡 2026 年铁律：新项目必须使用 <script setup> 和 Composition API。

🛠️ 二、极速上手：5 个核心概念

1. 响应式数据 (Reactivity)

不再区分 data，而是主动声明哪些数据需要响应式。

ref: 用于基本数据类型 (String, Number, Boolean)。
- 注意: JS 中访问需加 .value，模板中自动解包。
reactive: 用于对象/数组。
- 注意: 直接访问属性，无需 .value。

<script setup>
import { ref, reactive } from 'vue'// 基本类型
const count = ref(0) 
const increment = () => count.value++// 对象类型
const user = reactive({ name: 'Alice', age: 25 })
const updateName = () => user.name = 'Bob'
</script><template><div><p>计数: {{ count }}</p> <!-- 模板中不用 .value --><p>用户: {{ user.name }}</p><button @click="increment">+1</button></div>
</template>

2. 计算属性与监听 (Computed & Watch)

逻辑复用神器，替代 methods 中的复杂计算。

import { computed, watch } from 'vue'// 计算属性：有缓存，依赖变了才重新算
const doubleCount = computed(() => count.value * 2)// 监听器：侧效应（如发请求、操作 DOM）
watch(count, (newVal, oldVal) => {console.log(`计数从 ${oldVal} 变成了 ${newVal}`)
})

3. 生命周期 (Lifecycle)

Vue 2 的 mounted 变成了 onMounted。必须在 setup 中调用。

import { onMounted, onUnmounted } from 'vue'onMounted(() => {console.log('组件已挂载，可以操作 DOM 了')
})onUnmounted(() => {console.log('组件销毁，清理定时器/事件监听')
})

常用钩子映射: created→setup执行时, mounted→onMounted, updated→onUpdated.

4. 组件通信 (Props & Emits)

在 <script setup> 中极其简洁。

<script setup>
// 1. 接收 Props (2026年新特性：直接解构，依然保持响应式！)
const { title, isActive } = defineProps({title: String,isActive: Boolean
})// 2. 定义 emits
const emit = defineEmits(['update', 'close'])const handleClick = () => {emit('update', '新数据')
}
</script>

5. 逻辑复用 (Composables) ⭐最重要⭐

这是 Vue 3 的灵魂。替代 Vue 2 的 Mixins。
创建一个函数 useMouse.js，在任何组件里调用它，就能获得鼠标逻辑。

// composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'export function useMouse() {const x = ref(0)const y = ref(0)const update = (e) => { x.value = e.pageX; y.value = e.pageY }onMounted(() => window.addEventListener('mousemove', update))onUnmounted(() => window.removeEventListener('mousemove', update))return { x, y } // 返回响应式数据
}// 在组件中使用
// const { x, y } = useMouse()

📦 三、2026 年标准技术栈

如果你现在搭建项目，请直接使用以下组合：

构建工具: Vite (秒级启动，基于 Rolldown/Rust，极快)。
- 命令: npm create vue@latest
状态管理: Pinia (官方推荐，取代 Vuex)。
- 特点：没有复杂的 mutation，只有 state, getters, actions。
路由: Vue Router 4。
- 配合 Composition API 使用 useRouter() 和 useRoute()。
CSS 方案:
- Scoped CSS (<style scoped>)
- Tailwind CSS (原子化 CSS，目前最流行)
- UnoCSS (即时按需原子化引擎，Vite 生态首选)

⚡ 四、避坑指南 & 最佳实践

不要混用: 尽量全篇使用 <script setup>，不要在一个文件里混用 Options API 和 Composition API。
Ref vs Reactive:
- 初学者建议主要使用 ref。因为 ref 统一了基本类型和对象的访问方式（虽然对象要包一层），且重构时更安全（不会丢失响应性）。
- 2026 趋势: 很多团队倾向于 "All Ref" 策略。
Props 解构: 在 Vue 3.5+ 中，直接 const { name } = defineProps(...) 是安全的，不需要再用 toRefs 包装，这是巨大的语法简化。
异步组件: 使用 <Suspense> 处理异步依赖（如等待 API 数据加载再渲染组件）。