Vue3 学习笔记：一个前端小白的入门之旅

没学过 Vue2，直接上手 Vue3。把学到的、踩坑的、搞懂的都记下来了。

---

一、我为什么学 Vue3？

说实话，我没有前端基础，之前只写过一点 HTML 和 CSS，JavaScript 也刚学没多久。看到 Vue3 的语法，第一反应是“这都啥玩意儿”，从零开始学确实有点懵。

但 Vue3 的设计确实挺友好的，渐进式的框架意味着你可以只用它的一部分功能，不用一下子全学会。而且官方文档写得很详细，中文文档读起来也没什么障碍。

反正迟早要学，不如就现在开始。这篇博客就是我的学习笔记，边学边记，希望能帮到和我一样从零开始的同学。

---

二、创建第一个 Vue3 项目

Vue 官方推荐用 Vite 来创建项目，Vite 是一个很快的构建工具。

在终端里执行：

npm create vue@latest

然后会出现一系列选项，问项目名、要不要 TypeScript、要不要路由等等。我都选的默认，先让项目跑起来再说。

接着安装依赖并启动：

npm install
npm run dev

浏览器打开 http://localhost:5173，看到一个 Vue 的欢迎页面，项目就跑起来了。

项目结构里最重要的文件是 src 文件夹：

• main.js：入口文件，创建 Vue 应用
• App.vue：根组件，所有页面都从这里开始
• components/：存放组件的地方

---

三、我理解的 Vue3 核心概念

1. 什么是组件（Component）？

刚开始我完全搞不懂“组件”是啥意思，后来才明白——组件就是把页面拆成一块一块的小零件。

一个网页就像一个乐高模型，由很多小积木拼成。每个小积木就是一个组件。每个组件都包含三部分：

<template>
  <!-- HTML 模板：这里写页面的结构 -->
</template>

<script setup>
  // JavaScript：这里写逻辑
</script>

<style scoped>
  /* CSS：这里写样式，scoped 表示只影响当前组件 */
</style>

这样做的好处是，每个组件独立开发、独立维护，复用起来特别方便。比如一个商品卡片，在首页用一次，在搜索结果页用一次，在购物车页还能用一次。

2. 什么是响应式数据？

这是我刚开始最难理解的概念。

普通的 JavaScript 变量，改了值页面不会自动更新。但响应式数据不一样——数据变了，页面上用到这个数据的地方会跟着自动刷新。

Vue3 里定义响应式数据主要有两种方式：

ref：可以放任何类型的数据

import { ref } from 'vue'

const count = ref(0)          // 数字
const name = ref('张三')      // 字符串
const list = ref([])          // 数组
const user = ref({ name: '李四' })  // 对象

// 修改值的时候，要加 .value
count.value = 1
name.value = '李四'

reactive：只能放对象和数组，取值不需要 .value

import { reactive } from 'vue'

const user = reactive({
  name: '王五',
  age: 20
})

// 修改值直接改，不用 .value
user.age = 21

我目前的用法是：基本类型用 ref，对象用 reactive。不过也有人全用 ref，因为 ref 更统一，少记一种用法。

3. 模板语法：在 HTML 里写 JavaScript

Vue3 可以在 HTML 模板里直接写 JavaScript 表达式，用 {{ }} 包起来就行。

<template>
  <div>
    <!-- 直接显示数据 -->
    <p>{{ message }}</p>
    
    <!-- 可以写表达式 -->
    <p>{{ count + 1 }}</p>
    <p>{{ name ? '已登录' : '未登录' }}</p>
    
    <!-- 绑定属性用 v-bind，简写是 : -->
    <img :src="imageUrl" :alt="description" />
    
    <!-- 绑定事件用 v-on，简写是 @ -->
    <button @click="handleClick">点我</button>
    
    <!-- 条件渲染 -->
    <p v-if="isShow">这段文字显示/隐藏</p>
    
    <!-- 循环渲染 -->
    <li v-for="item in list" :key="item.id">
      {{ item.name }}
    </li>
  </div>
</template>

4. 计算属性 vs 方法，啥区别？

计算属性（computed）和方法（function）都能根据数据计算出新值，但有个关键区别：

• 计算属性会缓存结果，只有它依赖的数据变了才会重新计算
• 方法每次调用都会重新执行

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('张')
const lastName = ref('三')

// 计算属性：有缓存，依赖的数据不变就不会重新计算
const fullName = computed(() => {
  return firstName.value + lastName.value
})

// 方法：每次调用都重新计算
const getFullName = () => {
  return firstName.value + lastName.value
}
</script>

我的理解是：计算属性适合“根据已有数据算出新数据”的场景，方法适合“执行某个动作”的场景。

---

四、组件通信：父子之间怎么传数据

父传子：props

父组件想给子组件传数据，用 props。

父组件（App.vue）

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

const userInfo = ref('来自爸爸的消息')
</script>

<template>
  <!-- 把数据通过属性的方式传给子组件 -->
  <Child :info="userInfo" />
</template>

子组件（Child.vue）

<script setup>
// 用 defineProps 接收
const props = defineProps({
  info: String
})
</script>

<template>
  <p>{{ info }}</p>
</template>

子传父：emit

子组件想给父组件发消息，用 emit。

子组件（Child.vue）

<script setup>
const emit = defineEmits(['sendMessage'])

const handleClick = () => {
  // 触发事件，把数据带出去
  emit('sendMessage', '来自儿子的问候')
}
</script>

<template>
  <button @click="handleClick">给爸爸发消息</button>
</template>

父组件（App.vue）

<script setup>
import Child from './components/Child.vue'

const handleMessage = (msg) => {
  console.log('收到消息：', msg)
}
</script>

<template>
  <Child @send-message="handleMessage" />
</template>

---

五、生命周期：组件从诞生到销毁

每个 Vue 组件都有“生命周期”——它从创建到销毁会经历一系列阶段。

我目前最常用的是 onMounted，组件挂载到页面后执行，适合在这里发请求获取数据。

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('组件挂载完成，可以请求数据了')
  // 这里发 HTTP 请求拿数据
})
</script>

其他常用的生命周期钩子：

• onBeforeMount：挂载之前执行
• onMounted：挂载之后执行
• onBeforeUpdate：数据更新前执行
• onUpdated：数据更新后执行
• onBeforeUnmount：销毁之前执行
• onUnmounted：销毁之后执行

---

六、一开始没搞懂的坑

坑1：ref 改值忘记加 .value

const count = ref(0)

//  直接赋值没用，页面不会变
count = 10

//  要加 .value 才能生效
count.value = 10

记住：模板里不用加 .value，JS 里必须加 .value。

坑2：从 reactive 解构出来就失去响应式了

const user = reactive({ name: '张三', age: 20 })

//  解构后，name 和 age 就不再是响应式的了
const { name, age } = user

//  用 toRefs 可以保持响应式
import { toRefs } from 'vue'
const { name, age } = toRefs(user)

坑3：v-for 忘了写 :key

<!--  不写 key，Vue 会报警告 -->
<li v-for="item in list">{{ item }}</li>

<!--  加上 :key -->
<li v-for="item in list" :key="item.id">{{ item.name }}</li>

:key 的作用是帮 Vue 识别每个节点的唯一性，更新时能更高效。

---

七、接下来打算学什么

Vue3 基础语法差不多能用了，但还有不少东西没接触过：

• Vue Router：实现页面跳转和路由
• Pinia：状态管理，多个组件共享数据用的
• 组合式函数的封装和复用
• 和 Element Plus 这类组件库配合使用
• 用 Vite 打包部署项目

---

八、给同样零基础学 Vue3 的同学

1. 别怕“没基础” ：我连 JavaScript 都不太熟就直接学 Vue3 了，遇到不懂的语法就去查，查着查着就会了。

2. 别只看不写：看十遍不如写一遍。跟着官方教程的“快速上手”敲一遍，比看两个小时文档管用。

3. 从最小项目开始：先写一个 TodoList，把增删改查都实现了，Vue3 的核心用法基本就覆盖了。

4. 善用浏览器 DevTools：Vue Devtools 插件一定要装，组件树、响应式数据、事件都能直观看到，调试神器。

5. 遇到问题先看文档：Vue3 的官方文档写得真的很好，有“为什么这么设计”的解释，比到处搜博客靠谱。

---

学 Vue3 这件事，我最大的体会是：它没有想象中那么高不可攀。响应式、组件化这些概念，一开始听着很抽象，但自己动手写过几个小功能后，慢慢就理解了。

这篇博客我会持续更新，学到新东西就补上来。希望对你也有帮助。