当前位置：首页 > news >正文

vue3 之基础+核心概念+上手技巧

news 2025/10/21 10:41:19

文章目录

- - 一、前置基础（必备）
  - 二、Vue3 核心概念（重点掌握）
  - - 1. 开发环境搭建
    - 2. 单文件组件（.vue 文件）
    - 3. 组合式 API（Vue3 核心）
    - 4. 模板语法
    - 5. 组件通信
    - 6. 路由（Vue Router）
    - 7. 状态管理（Pinia）
  - 三、快速上手技巧

一、前置基础（必备）

HTML/CSS/JavaScript 基础
- 能看懂基本的 HTML 结构、CSS 样式（至少了解类名、选择器）。
- 掌握 JavaScript 核心语法：变量、函数、条件判断、循环、数组方法（map/filter 等）、对象、箭头函数、Promise、async/await。
- 了解 ES6+ 特性：let/const、解构赋值、模板字符串、模块导入导出（import/export）。
Node.js 和 npm 基础
- 安装 Node.js（自带 npm），知道 npm install（安装依赖）、npm run dev（启动开发服务）等基本命令。
- 理解“包管理”的概念（不必深入，会用即可）。

二、Vue3 核心概念（重点掌握）

1. 开发环境搭建

用官方推荐的 create-vue 脚手架快速创建项目：
```
npm create vue@latest
```
选择需要的配置（如 TypeScript、Vue Router、Pinia 等，新手建议先选“JavaScript”“Vue Router”“Pinia”）。
熟悉项目结构：src/components（组件）、src/views（页面）、src/App.vue（根组件）、src/main.js（入口文件）。

2. 单文件组件（.vue 文件）

结构：由 <template>（模板，HTML 结构）、<script>（逻辑，JavaScript）、<style>（样式）三部分组成。

示例：

<template><h1>{{ message }}</h1>
</template><script setup>
const message = 'Hello Vue3'
</script><style>
h1 { color: red; }
</style>

3. 组合式 API（Vue3 核心）

<script setup> 语法糖：简化代码，直接写变量和函数即可（无需 export default），是新手首选。

响应式数据：

ref：用于基本类型（数字、字符串等），访问时需要加 .value（模板中不用）。
```
import { ref } from 'vue'
const count = ref(0)
count.value++ // 修改值
```

reactive：用于对象/数组，直接修改属性即可。

import { reactive } from 'vue'
const user = reactive({ name: 'Tom' })
user.name = 'Jerry' // 直接修改

计算属性（computed）：依赖其他响应式数据，自动缓存结果。

import { ref, computed } from 'vue'
const count = ref(1)
const doubleCount = computed(() => count.value * 2)

生命周期钩子：如 onMounted（组件挂载后）、onUpdated（更新后）等，替代 Vue2 的 mounted 等。
```
import { onMounted } from 'vue'
onMounted(() => {console.log('组件挂载完成')
})
```

4. 模板语法

插值：{{ 变量 }} 显示文本，支持表达式（如 {{ count + 1 }}）。
指令：
- v-bind:属性（简写 :属性）：动态绑定属性，如 <img :src="imgUrl">。
- v-on:事件（简写 @事件）：绑定事件，如 <button @click="handleClick">点击</button>。
- v-if/v-else/v-show：条件渲染（v-if 会销毁元素，v-show 仅隐藏）。
- v-for：循环渲染，如 <li v-for="(item, index) in list" :key="index">{{ item }}</li>（key 必须加）。
双向绑定：v-model，常用于表单，如 <input v-model="username">（自动同步输入和变量）。

5. 组件通信

父传子：父组件用 :属性 传值，子组件用 defineProps 接收。

<!-- 父组件 -->
<Child :title="msg" /><!-- 子组件 -->
<script setup>
const props = defineProps({ title: String })
</script>
<template>{{ props.title }}</template>

子传父：子组件用 defineEmits 定义事件，父组件用 @事件 接收。

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['change'])
const handleClick = () => emit('change', '新值')
</script><!-- 父组件 -->
<Child @change="(val) => console.log(val)" />

6. 路由（Vue Router）

用于页面跳转，配置 src/router/index.js 定义路由规则。
核心组件：<RouterLink to="/home">首页</RouterLink>（跳转链接）、<RouterView>（显示当前页面内容）。
编程式导航：useRouter 跳转，如 router.push('/about')。

7. 状态管理（Pinia）

管理全局共享数据（如用户信息、购物车），替代 Vue2 的 Vuex。

基本用法：定义 store，在组件中通过 useStore 访问。

// src/stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: { increment() { this.count++ } }
})// 组件中使用
import { useCounterStore } from './stores/counter'
const store = useCounterStore()
store.increment() // 调用方法