Vue 学习概述

前言

Vue是款由尤雨溪（Evan You）创建的渐进式 JavaScript 框架，旨在通过简洁易用的 API 构建用户界面。Vue 采用组件化开发方式，支持响应式数据绑定和组合式 API，使得构建复杂应用变得高效且灵活。Vue 的核心特点包括响应式系统、组件化、虚拟 DOM 和单向数据流等。以下是对 Vue 的简要讲解：

核心概念

响应式系统

Vue 的响应式系统允许数据变化时自动更新视图。通过使用 ref 和 reactive，开发者可以轻松创建响应式数据对象。当这些数据发生变化时，相关的组件会自动重新渲染。

组件（Components）

组件是 Vue 应用的基本构建块。每个组件都是一个独立的、可复用的 UI 单元，可以包含自己的状态和逻辑。组件可以是单文件组件（.vue 文件），也可以是函数式组件。组件化使得代码更易维护和复用。

模板语法（Template Syntax）

Vue 使用基于 HTML 的模板语法，允许开发者声明式地绑定数据到 DOM 元素。模板中可以使用指令（如 v-if、v-for）来控制渲染逻辑。

虚拟 DOM（Virtual DOM）

Vue 使用虚拟 DOM 来提高性能。虚拟 DOM 是一个轻量级的 JavaScript 对象，表示真实 DOM 的副本。当组件的状态发生变化时，Vue 会首先更新虚拟 DOM，然后通过比较新旧虚拟 DOM 的差异，最小化地更新真实 DOM。

单向数据流（One-way Data Flow）

Vue 采用单向数据流的设计理念，数据从父组件传递到子组件。这样可以更容易地追踪数据的变化，提升应用的可维护性。

组合式 API（Composition API）

Vue 3 引入了组合式 API，允许开发者通过函数来组织组件逻辑。常用的组合式 API 包括 setup 函数、ref、reactive、computed 和 watch 等。

开发环境与快速启动

推荐使用最新版的 Node.js 与 Vite 创建项目：

1
2
3
4
5
6
7



npm create vue@latest #使用 npm 创建项目,新手推荐使用 npm
该指令将会安装并执行 create-vue 脚本,它是 Vue 官方推荐的脚手架工具，你将会看到交互式的选项来配置你的项目，例如选择模板（如 Vue 3 + TypeScript）、添加路由、状态管理等，包括项目名称，这里假定项目名为 my-vue-app。

cd my-vue-app #进入项目目录
npm install #安装依赖
npm run dev	 #启动开发服务器

打开 http://localhost:5173 即可预览。

组合式 API 基本示例

以下示例展示计数器的实现：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<template>
	<div>
		<p>Count: {{ count }}</p>
		<button @click="increment">Increment</button>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
function increment() {
	count.value++
}
</script>

组件传参与事件

父组件向子组件传递 props，并通过 emit 触发事件：

Child.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<template>
	<button @click="onClick">{{ label }}</button>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps<{ label: string }>()
const emit = defineEmits<{
	(e: 'clicked'): void
}>()

function onClick() {
	emit('clicked')
}
</script>

Parent.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<template>
	<Child label="Click me" @clicked="handle" />
</template>

<script setup lang="ts">
import Child from './Child.vue'

function handle() {
	console.log('child clicked')
}
</script>

路由（Vue Router）基础

安装并配置 Vue Router：

1

pnpm add vue-router@4

src/router/index.ts 示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
	{ path: '/', component: Home },
	{ path: '/about', component: About },
]

export const router = createRouter({
	history: createWebHistory(),
	routes,
})

在 main.ts 中挂载：

1
2
3
4
5


import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

createApp(App).use(router).mount('#app')

状态管理（Pinia）

使用 Pinia 取代 Vuex：

1

pnpm add pinia

示例 store：

1
2
3
4
5
6
7
8
9


// stores/counter.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCounter = defineStore('counter', () => {
	const count = ref(0)
	function increment() { count.value++ }
	return { count, increment }
})

在主应用中挂载 Pinia：

1
2


import { createPinia } from 'pinia'
createApp(App).use(createPinia()).use(router).mount('#app')

组件中使用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<script setup lang="ts">
import { useCounter } from '@/stores/counter'
const counter = useCounter()
</script>

<template>
	<div>
		<p>{{ counter.count }}</p>
		<button @click="counter.increment">+</button>
	</div>
</template>

常用工具与测试

开发工具：Vite、ESLint、Prettier、TypeScript。
测试：Vitest + @vue/test-utils。

简单的 Vitest 测试示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// tests/example.spec.ts
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Hello from '../src/components/HelloWorld.vue'

describe('Hello', () => {
    it('renders properly', () => {
		const wrapper = mount(Hello)
		expect(wrapper.text()).toContain('Hello')
	})
})

部署与发布建议

小型项目可以使用 Vercel 或 Netlify 直接部署，无需复杂配置。
打包命令：

1
2
3


pnpm build
# 本地预览
pnpm preview

Vue概述