首页
/ 正文

Vue3 起步（超详细）

更新时间: 2025-04-16 00:59:33

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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.js 一直以简洁、灵活和高效著称。而 Vue3 作为 Vue.js 的重大升级版本，不仅优化了性能，还引入了 Composition API 等全新特性，为开发者提供了更强大的工具链。无论是编程初学者还是有一定经验的开发者，掌握 Vue3 都是迈向现代前端开发的重要一步。本文将从零开始，以循序渐进的方式讲解 Vue3 的核心概念、开发流程和最佳实践，帮助读者快速上手并构建自己的第一个 Vue3 应用。

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

安装 Vue3 的两种方式

Vue3 可以通过两种方式快速集成到项目中：脚手架工具和手动引入。对于初学者，推荐使用官方提供的 Vue CLI 或 Vite 快速搭建开发环境。

方式一：使用 Vite 创建项目

Vite 是 Vue3 推荐的轻量级构建工具，启动速度快且无需配置。运行以下命令即可创建项目：

npm create vite@latest my-vue3-project -- --template vue  
cd my-vue3-project  
npm install  
npm run dev

这种方式会自动生成一个包含 Vue3 的基础项目结构，开发者可以直接在 src/main.js 中编写代码。

方式二：手动引入 Vue3

如果希望手动配置项目，可以在 HTML 文件中通过 CDN 引入 Vue3：

<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue3 起步示例</title>  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>  
</head>  
<body>  
  <div id="app">  
    {{ message }}  
  </div>  
  <script>  
    const { createApp } = Vue;  
    createApp({  
      data() {  
        return { message: "Hello Vue3!" };  
      }  
    }).mount("#app");  
  </script>  
</body>  
</html>

这种方式适合快速验证代码逻辑或学习基础语法。

核心概念：理解 Vue3 的底层逻辑

响应式系统：数据驱动视图的“魔法”

Vue3 的响应式系统是其核心特性之一。它通过 Proxy 对象（替代 Vue2 的 Object.defineProperty）实现对数据变化的追踪，并自动更新视图。

响应式数据的创建

开发者可以通过 ref 或 reactive 函数创建响应式数据：

// 使用 ref 创建单一响应式值  
const count = ref(0);  

// 使用 reactive 创建复杂对象的响应式数据  
const state = reactive({  
  name: "Vue3",  
  version: 3.0  
});

当 count.value 或 state.name 发生变化时，视图会自动更新。

比喻理解：响应式系统如同快递跟踪

想象你寄送包裹时，物流系统会实时更新包裹的位置。Vue3 的响应式系统类似：数据变化就像包裹位置更新，而视图就像物流页面——每当数据变化，页面会“自动刷新”显示最新状态。

模板语法：Vue3 的“语言”

基础指令与绑定

Vue3 的模板语法通过指令（以 v- 开头）实现数据与 DOM 的绑定。

双向绑定与事件处理

<!-- 输入框的值与数据双向绑定 -->  
<input v-model="message">  

<!-- 点击事件触发函数 -->  
<button @click="increment">增加计数</button>

在 JavaScript 中定义对应逻辑：

const app = {  
  data() {  
    return { message: "", count: 0 };  
  },  
  methods: {  
    increment() {  
      this.count++;  
    }  
  }  
};

列表渲染与条件渲染

<!-- 渲染待办事项列表 -->  
<ul>  
  <li v-for="item in items" :key="item.id">  
    {{ item.text }}  
  </li>  
</ul>  

<!-- 根据条件显示内容 -->  
<div v-if="isLoggedIn">  
  欢迎回来！  
</div>

组件系统：模块化开发的核心

组件的创建与复用

组件是 Vue3 的核心概念，它将功能封装为可复用的模块。通过 defineComponent 或直接对象定义组件：

// 定义一个计数器组件  
const Counter = {  
  template: `<button @click="increment">{{ count }}</button>`,  
  setup() {  
    const count = ref(0);  
    const increment = () => count.value++;  
    return { count, increment };  
  }  
};

在父组件中使用：

<template>  
  <counter />  
</template>

父子组件通信：props 与 emit

父子组件通过 props 传递数据，通过 emit 触发事件：

// 父组件  
<template>  
  <child-component :initial-count="count" @increment="handleIncrement" />  
</template>  

// 子组件  
const ChildComponent = {  
  props: ["initialCount"],  
  setup(props, { emit }) {  
    const increment = () => emit("increment");  
    return { increment };  
  }  
};

Composition API：代码组织的革命

Vue3 推荐使用 Composition API 替代 Vue2 的选项式 API，通过 setup() 函数集中管理组件逻辑。

setup 函数的使用场景

setup() {  
  const name = ref("Vue3");  
  const greet = () => alert(`Hello ${name.value}!`);  
  return { name, greet }; // 需要显式返回要暴露的变量和方法  
}

核心函数与钩子

函数/钩子	作用描述
`ref()`	创建响应式基本类型（如数字、字符串）
`reactive()`	创建响应式对象或数组
`computed()`	定义计算属性
`watch()`	监听数据变化并执行副作用
`onMounted()`	组件挂载后执行的生命周期钩子

生命周期钩子：组件的“生命阶段”

Vue3 将 Vue2 的生命周期钩子以组合式 API 的形式重新定义，例如 onMounted()、onUnmounted() 等。

setup() {  
  onMounted(() => {  
    console.log("组件已挂载");  
  });  

  onBeforeUnmount(() => {  
    console.log("组件即将卸载");  
  });  

  return {};  
}

生命周期的比喻：人生阶段

组件的生命周期类似人的成长阶段：

onBeforeMount：出生前的准备阶段
onMounted：成年后开始工作
onUnmounted：退休后的收尾工作

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

需求分析

创建一个包含以下功能的待办事项列表：

添加新任务
标记任务为完成
删除任务

代码实现

1. 创建主组件

const App = {  
  setup() {  
    const newTask = ref("");  
    const tasks = ref([]);  

    const addTask = () => {  
      if (newTask.value.trim()) {  
        tasks.value.push({  
          text: newTask.value,  
          completed: false  
        });  
        newTask.value = "";  
      }  
    };  

    const deleteTask = (index) => {  
      tasks.value.splice(index, 1);  
    };  

    return {  
      newTask, tasks, addTask, deleteTask  
    };  
  },  

  template: `  
    <div>  
      <input v-model="newTask" placeholder="输入新任务" />  
      <button @click="addTask">添加</button>  

      <ul>  
        <li v-for="(task, index) in tasks" :key="index">  
          <input type="checkbox" v-model="task.completed" />  
          <span :class="{ completed: task.completed }">{{ task.text }}</span>  
          <button @click="deleteTask(index)">删除</button>  
        </li>  
      </ul>  
    </div>  
  `  
};  

createApp(App).mount("#app");

2. 样式增强

.completed {  
  text-decoration: line-through;  
  color: #888;  
}

性能优化与调试技巧

开发者工具：Vue DevTools

安装 Chrome 插件 Vue DevTools ，可以实时查看组件树、响应式数据和性能分析。

避免性能问题

减少不必要的计算：使用 v-once 或 v-memo 避免重复渲染
优化列表渲染：为 v-for 添加 key 属性
使用 Suspense 组件：处理异步依赖加载的边界情况

结论

通过本文的讲解，读者已经掌握了 Vue3 的核心概念、组件化开发流程以及实际项目中的应用技巧。Vue3 不仅继承了 Vue.js 易于上手的优点，还通过 Composition API 和响应式系统等特性，为开发者提供了更灵活、高效的开发体验。

无论是构建个人项目还是企业级应用，Vue3 都能帮助开发者快速实现从想法到产品的转化。接下来，建议读者通过官方文档和开源项目进一步深入学习，逐步掌握路由（Vue Router）、状态管理（Pinia）等高级特性。

记住，学习 Vue3 的最佳方式是动手实践——现在就创建你的第一个 Vue3 应用吧！