Vue基础知识点巩固

用户80613816659
0 阅读4分钟

从0到1巩固 Vue 3 是一个非常棒的学习目标！Vue 3 是目前前端开发中非常流行的一个渐进式 JavaScript 框架，具有响应式系统、组合式 API（Composition API）、更好的性能和更灵活的组件化能力。

下面我将为你提供一份系统性学习路径 + 核心知识点梳理 + 实战建议，帮助你从零开始全面掌握并巩固 Vue 3。

🎯 学习目标

  • 掌握 Vue 3 的核心语法与特性
  • 理解 Composition API 和 Options API 的区别与使用场景
  • 能独立搭建项目并实现常见功能（如路由、状态管理）
  • 具备实际开发能力，能写出可维护、高效的 Vue 应用

📚 第一阶段：基础知识入门（1~2周）

1. 环境搭建

# 使用 Vite 创建 Vue 3 项目（推荐）
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

✅ 建议使用 Vite 而不是 Vue CLI，因为 Vite 更快、更现代。

2. 核心概念理解

概念说明
响应式数据ref() 和 reactive() 是 Vue 3 响应式的基石
模板语法插值 {{ }}、指令 v-if, v-for, v-model 等
组件系统.vue 单文件组件（SFC），支持 <script>, <template>, <style>

示例：Hello World 组件

<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">更新</button>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue 3!')
const updateMessage = () => {
  message.value = 'Updated!'
}
</script>

✅ 使用 <script setup> 是 Vue 3 推荐的写法（编译时优化）

🔧 第二阶段：深入核心特性（2~3周）

1. Composition API vs Options API

对比项Options APIComposition API
数据定义data() 返回对象ref(), reactive()
方法methods: {}函数直接定义
逻辑复用Mixins（有命名冲突）自定义 Hook（推荐）
可读性分散在不同选项按逻辑组织代码

✅ 建议主攻 Composition API，它是 Vue 3 的未来方向。

2. 响应式原理详解

  • ref()：用于基本类型，.value 访问
  • reactive()：用于对象/数组，不能解构（会失去响应性）
  • toRefs()：解决 reactive 解构后失活问题
import { reactive, toRefs } from 'vue'

const state = reactive({ count: 0, name: 'Vue' })
const { count, name } = toRefs(state) // 保持响应性

3. 生命周期钩子（Composition API 中）

import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件挂载了')
})
Options APIComposition API
createdsetup()（同步执行）
mountedonMounted()
updatedonUpdated()
beforeDestroyonBeforeUnmount()
destroyedonUnmounted()

🛠️ 第三阶段：常用生态整合（2周）

1. Vue Router 4（官方路由）

安装：

npm install vue-router@4

配置示例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('../views/About.vue') }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在 main.js 中使用：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

模板中使用：

<router-link to="/">首页</router-link>
<router-view />

2. Pinia（Vue 官方推荐的状态管理）

替代 Vuex，更简洁易用。

安装：

npm install pinia

创建 store：

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  },
  getters: {
    double: (state) => state.count * 2
  }
})

在组件中使用：

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>
<template>
  <div>{{ counter.count }} - {{ counter.double }}</div>
  <button @click="counter.increment">+1</button>
</template>

💡 第四阶段：高级技巧与最佳实践（1~2周）

1. 自定义 Hooks（逻辑复用）

类似 React Hooks，封装可复用逻辑。

// composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(e) {
    x.value = e.clientX
    y.value = e.clientY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

使用：

<script setup>
import { useMouse } from '@/composables/useMouse'
const { x, y } = useMouse()
</script>
<template>
  <div>鼠标位置：{{ x }}, {{ y }}</div>
</template>

2. Teleport（传送门）

将 DOM 渲染到任意位置（如模态框）

<teleport to="body">
  <div v-if="showModal" class="modal">这是一个弹窗</div>
</teleport>

3. Suspense（异步组件加载）

配合 defineAsyncComponent 使用（了解即可，生产中较少用）

🏗️ 第五阶段：实战项目巩固（2~4周）

推荐项目练手：

项目技术点
TodoListv-model, v-for, 本地存储
博客系统路由、组件通信、Markdown 渲染
后台管理系统Pinia、动态路由、权限控制、表格分页
商品购物车状态管理、计算属性、事件总线

🎯 建议做 1~2 个完整项目，并部署上线（如 Vercel / Netlify）

📖 推荐学习资源

官方文档（必看）

视频教程（B站）

  • 《尚硅谷 Vue 3 教程》
  • 《Vue Mastery 中文翻译系列》

书籍

  • 《Vue.js 设计与实现》——霍春阳（深入源码级理解）
  • 《深入浅出 Vue.js》

✅ 巩固建议

  1. 每天动手写代码，哪怕只是小例子
  2. 画思维导图 梳理知识结构（如响应式原理流程图）
  3. 参与开源项目或贡献 GitHub
  4. 模拟面试题练习：
    • Vue 3 响应式原理？
    • ref 和 reactive 区别？
    • setup 中如何访问 props？
    • nextTick 原理？

🎉 总结：你的 Vue 3 成长路线图

基础语法 → Composition API → 路由 & 状态管理 → 高级特性 → 实战项目 → 源码/原理提升

只要你坚持 “学+练+总结” 三位一体，一个月内完全可以达到熟练使用 Vue 3 的水平！

如果你需要，我可以继续提供：

  • Vue 3 小案例合集（每日一练）
  • 面试题汇总 PDF
  • 项目模板结构推荐
  • 面试简历优化建议

欢迎随时提问！💪🔥

avatar
文章
阅读
粉丝