Vue 3 是目前非常流行的前端框架，对于新手来说，学习它可以从基础概念开始，逐步掌握核心功能。以下是一个适合新手的学习路径和关键知识点：

一、准备工作

1. 环境搭建

   • 安装 Node.js（建议 v16+），它包含 npm 包管理器
   • 推荐使用 Vue 官方的脚手架工具 create-vue 创建项目：

     bash

     npm create vue@latest
     

   • 按照提示选择需要的功能（如 TypeScript、Vue Router、Pinia 等）

2. 开发工具

   • 推荐 VS Code + Volar 插件（Vue 3 官方推荐，替代 Vetur）

二、核心概念（基础）

1. Vue 实例与组件

• Vue 3 中通过 createApp 创建应用实例：

  javascript

  import { createApp } from 'vue'
  import App from './App.vue'
  createApp(App).mount('#app')
  

• 组件是 Vue 的基本单位，一个 .vue 文件就是一个组件，包含 3 部分：

  vue

  <template> <!-- 模板：HTML 结构 -->
    <h1>{{ message }}</h1>
  </template>
  
  <script> <!-- 逻辑：JavaScript 代码 -->
    export default {
      data() {
        return { message: 'Hello Vue!' }
      }
    }
  </script>
  
  <style> <!-- 样式：CSS -->
    h1 { color: red; }
  </style>
  

2. 模板语法

• 插值：使用 {{ }} 显示数据
• 指令：以 v- 开头的特殊属性，如：
  • v-bind:属性="值"（简写 :属性）：绑定 HTML 属性
  • v-if/v-else：条件渲染
  • v-for：列表渲染（需加 :key）
  • v-on:事件="方法"（简写 @事件）：绑定事件

vue

<template>
  <img :src="imgUrl" :alt="message">
  <p v-if="showMessage">{{ message }}</p>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
  <button @click="handleClick">点击</button>
</template>

3. 响应式数据

• Vue 3 中使用 ref（基本类型）和 reactive（对象 / 数组）创建响应式数据：

  javascript

  <script setup>
  import { ref, reactive } from 'vue'
  
  // 基本类型
  const count = ref(0)
  count.value = 1 // 修改值需用 .value
  
  // 对象/数组
  const user = reactive({ name: 'Vue', age: 3 })
  user.age = 4 // 直接修改
  </script>
  

• <script setup> 是 Vue 3.2+ 推荐的语法，简化组件代码。

三、核心概念（进阶）

1. 组件通信

• 父传子：通过 props

  vue

  <!-- 父组件 -->
  <ChildComponent :msg="parentMsg" />
  
  <!-- 子组件 -->
  <script setup>
  const props = defineProps({
    msg: String
  })
  console.log(props.msg)
  </script>
  

• 子传父：通过 emit

  vue

  <!-- 子组件 -->
  <script setup>
  const emit = defineEmits(['childEvent'])
  const handleClick = () => {
    emit('childEvent', '数据')
  }
  </script>
  
  <!-- 父组件 -->
  <ChildComponent @childEvent="handleChildEvent" />
  

2. 生命周期钩子

• 常用钩子（在 <script setup> 中使用）：

  javascript

  import { onMounted, onUpdated, onUnmounted } from 'vue'
  
  onMounted(() => {
    console.log('组件挂载完成')
  })
  onUpdated(() => {
    console.log('组件更新完成')
  })
  onUnmounted(() => {
    console.log('组件卸载')
  })
  

3. 状态管理

• 小型项目：使用 reactive + provide/inject
• 中大型项目：使用官方推荐的 Pinia（Vuex 的替代者）

  javascript

  // store/counter.js
  import { defineStore } from 'pinia'
  export const useCounterStore = defineStore('counter', {
    state: () => ({ count: 0 }),
    actions: {
      increment() { this.count++ }
    }
  })
  

  

四、实战练习

1. 制作一个简单的 Todo List 应用（涵盖增删改查）
2. 使用 Vue Router 实现多页面跳转
3. 集成 Axios 调用 API 获取数据

五、学习资源

• 官方文档：Vue 3 官方文档（最权威）
• 视频教程：B 站搜索「Vue 3 入门到精通」（推荐尚硅谷、黑马等机构的免费教程）
• 练习平台：CodeSandbox、StackBlitz 可在线编写 Vue 代码

从基础开始，多写代码多练习，遇到问题先查文档，逐步就能掌握 Vue 3 的核心用法！