异常教程

vue3 教程（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

欢迎来到 Vue 3 教程！作为前端框架的热门选择，Vue 3 以简洁的语法、灵活的组件化设计和强大的响应式系统，成为开发者构建现代 Web 应用的首选工具。无论是编程初学者还是有一定经验的中级开发者，都能通过本教程快速掌握 Vue 3 的核心概念与实践技巧。本文将从环境搭建到实战项目，以循序渐进的方式展开讲解，并穿插生动的比喻和代码示例，帮助读者构建扎实的 Vue 3 基础。

环境搭建：从零开始的准备工作

安装 Node.js 和 Vue CLI

Vue 3 的开发需要 Node.js 环境支持。首先，访问 Node.js 官网 下载并安装最新版本。安装完成后，通过命令行验证版本：

node -v  
npm -v

接下来，安装 Vue CLI 工具：

npm install -g @vue/cli

创建 Vue 3 项目

使用 Vue CLI 快速生成项目模板：

vue create my-vue3-project

在配置界面选择 Vue 3，并安装必要的依赖。若希望体验更快的开发体验，可尝试使用 Vite：

npm init vite@latest

选择 Vue 3 模板后，即可启动开发服务器：

cd my-vue3-project  
npm run dev

核心概念：Vue 3 的基础框架

响应式数据：让页面“自动更新”的魔法

Vue 3 的核心特性是响应式系统，它允许数据变化时自动更新视图。通过 ref 和 reactive 两个函数，开发者可以轻松管理状态。

ref：包装单个响应式值

<template>  
  <div>  
    <p>当前计数：{{ count }}</p>  
    <button @click="increment">+1</button>  
  </div>  
</template>  

<script setup>  
import { ref } from 'vue'  
const count = ref(0)  
const increment = () => count.value++  
</script>

这里，ref 将 count 包装成一个响应式对象，.value 属性用于读写值。当 count 变化时，视图会自动刷新。

reactive：管理复杂对象的响应性

<script setup>  
import { reactive } from 'vue'  
const user = reactive({  
  name: 'Alice',  
  age: 25  
})  
</script>

reactive 用于处理对象或数组的响应式，直接通过 user.name 访问属性即可触发更新。

组件化开发：像搭积木一样构建应用

Vue 3 以组件为核心，每个组件包含模板（template）、逻辑（script）和样式（style）。例如，创建一个 TodoItem 组件：

<!-- TodoItem.vue -->  
<template>  
  <li>  
    {{ text }}  
    <button @click="$emit('delete')">删除</button>  
  </li>  
</template>  

<script setup>  
defineProps({ text: String })  
</script>

父组件可通过 v-for 渲染列表，并监听子组件的事件：

<template>  
  <ul>  
    <TodoItem  
      v-for="item in todos"  
      :key="item.id"  
      :text="item.text"  
      @delete="handleDelete(item.id)"  
    />  
  </ul>  
</template>

响应式原理：揭秘 Vue 3 的“自动更新”机制

Proxy vs Object.defineProperty

Vue 3 通过 Proxy 替代 Vue 2 的 Object.defineProperty 实现响应式，优势在于：

  • 更全面的拦截：支持数组、对象等复杂类型的变化检测。
  • 更好的性能：减少内存占用，提升大规模数据操作效率。

比喻：响应式系统像“自动更新的文档”

想象你正在编辑一份文档，每当修改内容时，系统会自动同步到所有相关页面。Vue 3 的响应式系统正是如此：

  • 数据变更 → 依赖收集 → 视图更新
  • 通过 Proxy 监听数据访问和修改，触发依赖更新。

案例：响应式数据的联动

<script setup>  
import { reactive } from 'vue'  
const state = reactive({  
  count: 0,  
  message: '初始信息'  
})  
const updateMessage = () => {  
  state.message = `当前计数：${state.count}`  
}  
</script>  

<template>  
  <p>{{ state.message }}</p>  
  <button @click="state.count++">增加计数</button>  
</template>

当 count 增加时，message 会自动更新，无需手动触发渲染。

组件通信：父子组件如何“对话”

父传子：通过 Props 传递数据

父组件定义 Props：

<template>  
  <ChildComponent :initial-value="parentData" />  
</template>  

<script setup>  
const parentData = ref('来自父组件的数据')  
</script>

子组件接收 Props：

<script setup>  
const props = defineProps({  
  initialValue: String  
})  
</script>

子传父：通过事件触发父组件方法

子组件触发事件：

<button @click="$emit('custom-event', '事件数据')">触发事件</button>

父组件监听事件：

<ChildComponent @custom-event="handleEvent" />

Composition API：用函数式思维组织代码

Vue 3 推荐使用 Composition API，通过 setup() 函数集中管理逻辑。

基本语法：setup() 函数的使用

<script setup>  
import { ref } from 'vue'  
const count = ref(0)  
const increment = () => count.value++  
</script>

相比 Options API，Composition API 更适合大型项目，因为它：

  • 允许逻辑复用（通过 setup() 返回共享函数）。
  • 避免了 this 上下文的问题。

案例：代码复用的函数工厂

// useCounter.js  
export function useCounter() {  
  const count = ref(0)  
  const increment = () => count.value++  
  return { count, increment }  
}

在组件中使用：

<script setup>  
import { useCounter } from './useCounter'  
const { count, increment } = useCounter()  
</script>

实战项目：构建一个待办事项应用

功能需求

  • 展示待办事项列表。
  • 添加、删除和标记完成状态。
  • 数据持久化（本地存储）。

代码实现

1. 主组件 App.vue

<template>  
  <div>  
    <h1>待办事项</h1>  
    <TodoInput @add-todo="addTodo" />  
    <TodoList :todos="todos" @toggle-complete="toggleComplete" @delete-todo="deleteTodo" />  
  </div>  
</template>  

<script setup>  
import { ref } from 'vue'  
import TodoInput from './components/TodoInput.vue'  
import TodoList from './components/TodoList.vue'  

const todos = ref([])  

const addTodo = (text) => {  
  todos.value.push({  
    id: Date.now(),  
    text,  
    completed: false  
  })  
  saveToStorage()  
}  

const toggleComplete = (id) => {  
  const todo = todos.value.find(t => t.id === id)  
  todo.completed = !todo.completed  
  saveToStorage()  
}  

const deleteTodo = (id) => {  
  todos.value = todos.value.filter(t => t.id !== id)  
  saveToStorage()  
}  

const saveToStorage = () => {  
  localStorage.setItem('todos', JSON.stringify(todos.value))  
}  

// 初始化时加载数据  
const loadFromStorage = () => {  
  const storedTodos = localStorage.getItem('todos')  
  if (storedTodos) todos.value = JSON.parse(storedTodos)  
}  
loadFromStorage()  
</script>

2. 子组件 TodoList.vue

<template>  
  <ul>  
    <li  
      v-for="todo in todos"  
      :key="todo.id"  
      :class="{ completed: todo.completed }"  
    >  
      <input  
        type="checkbox"  
        :checked="todo.completed"  
        @change="$emit('toggle-complete', todo.id)"  
      />  
      {{ todo.text }}  
      <button @click="$emit('delete-todo', todo.id)">删除</button>  
    </li>  
  </ul>  
</template>  

<script setup>  
defineProps({ todos: Array })  
</script>

结论

通过本篇 Vue 3 教程，我们从环境搭建到实战项目，逐步探索了 Vue 3 的核心概念与高级特性。无论是响应式数据的“自动更新”机制，还是 Composition API 的灵活组织方式，Vue 3 都为开发者提供了高效、直观的开发体验。

对于初学者，建议从基础组件和响应式系统开始实践；中级开发者则可以深入学习 Composition API 和项目优化技巧。记住，理论结合实践是掌握 Vue 3 的关键。希望本文能成为你迈向 Vue 3 开发之路的坚实起点！

（全文约 1800 字）

最新发布

查看更多文章