概述
Vue3学习涵盖了从基础概念到核心特性的全面介绍，包括Vue3的安装、项目搭建、组件开发和路由管理等内容。文章还详细讲解了Composition API、模板语法、状态管理和实战演练，帮助读者从入门到初步掌握Vue3。
Vue3基础概念介绍Vue3简介
Vue3 是 Vue.js 的最新稳定版本，它在 Vue2 的基础上进行了多项改进和优化。Vue3 带来了更好的性能、更小的体积、更好的 TypeScript 支持以及更强大的 Composition API。Vue3 的核心设计理念包括可组合性、响应式系统和更高效的渲染机制。
Vue3 通过重构响应式系统，引入了新的 Proxy 代理对象，使得响应式数据可以更精确地追踪和更新，从而提高性能。同时，Vue3 还优化了模板编译器，减少了内存和 DOM 操作的开销。
安装Vue3
安装 Vue3 可以通过 Vue CLI（Vue命令行工具）或者直接引入 Vue3 的 CDN 来进行。
使用 Vue CLI 安装
- 首先确保安装了 Node.js 和 npm。
- 全局安装 Vue CLI：
npm install -g @vue/cli- 使用 Vue CLI 创建一个新的 Vue3 项目：
vue create my-vue3-app在创建项目时选择 Vue 3，或者在创建项目后手动修改 package.json 文件中的 dependencies 字段，将 vue 版本设置为 3.x。
使用 CDN 安装
在 HTML 文件中引入 Vue3 的 CDN，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3入门示例</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello, Vue3!'
}
}
})
app.mount('#app')
</script>
</body>
</html>Vue3项目搭建
使用 Vue CLI 创建一个 Vue3 项目，可以轻松地配置开发环境。
- 创建项目：
vue create my-vue3-app- 在项目创建过程中，选择 Vue 3 作为基础模板。
- 安装完成后，进入项目目录并启动开发服务器：
cd my-vue3-app
npm run serve这将启动开发服务器，默认在 localhost:8080 运行。
Composition API
Vue3 引入了 Composition API，它允许更灵活地组织和复用逻辑。Composition API 通过 setup 函数来集中所有响应式数据、生命周期钩子和方法。
基本使用
在模板中使用 Composition API：
<template>
<div>
<p>{{ message }}</p>
<button @click="increment">{{ count }}</button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const message = ref('Hello, Composition API!');
const count = ref(0);
function increment() {
count.value++;
}
onMounted(() => {
console.log('Component has been mounted.');
});
</script>模板语法
Vue3 的模板语法是基于 HTML 的，通过指令和插值来实现数据绑定和动态渲染。
指令
Vue3 中的指令以 v- 开头。例如，v-if 用于条件渲染，v-for 用于列表渲染。
<template>
<div>
<p v-if="show">Hello, World!</p>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue';
const show = ref(true);
const items = ref([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]);
</script>数据绑定与响应式系统
Vue3 的响应式系统基于 Proxy 对象实现，能够更精确地追踪数据变化。
响应式数据
在 Vue3 中，可以通过 ref 和 reactive 来创建响应式数据。
import { ref, reactive } from 'vue';
const count = ref(0);
const state = reactive({
count: 0,
name: 'Vue3'
});
function increment() {
count.value++;
state.count++;
}
console.log(count.value); // 输出 0
increment();
console.log(count.value); // 输出 1组件的基本使用
Vue3 的组件是构建应用的基本单元。组件可以重复使用，也可以嵌套使用。
创建组件
创建一个 Vue3 组件：
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const title = ref('My Component');
const message = ref('Hello, from Vue3!');
</script>引用组件
在其他组件或模板中引用这个组件：
<template>
<div>
<h1>App Component</h1>
<MyComponent />
</div>
</template>
<script setup>
import MyComponent from './MyComponent.vue';
</script>插槽与作用域插槽
Vue3 支持插槽来复用和定制组件的内部结构。
基本插槽
定义一个带有插槽的组件：
<template>
<div>
<slot></slot>
</div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('Default Message');
</script>使用插槽：
<template>
<div>
<h1>App Component</h1>
<MyComponent>
<p>Custom Message</p>
</MyComponent>
</div>
</template>
<script setup>
import MyComponent from './MyComponent.vue';
</script>作用域插槽
定义一个带有作用域插槽的组件：
<template>
<div>
<slot :message="message"></slot>
</div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('Scoped Slot');
</script>使用作用域插槽：
<template>
<div>
<h1>App Component</h1>
<MyComponent>
<template v-slot="{ message }">
<p>{{ message }}</p>
</template>
</MyComponent>
</div>
</template>
<script setup>
import MyComponent from './MyComponent.vue';
</script>动态组件与异步组件
Vue3 支持动态组件，可以根据条件渲染不同的组件。
动态组件
使用 <component> 标签动态切换组件：
<template>
<div>
<button @click="currentComponent = 'ComponentA'">Component A</button>
<button @click="currentComponent = 'ComponentB'">Component B</button>
<component :is="currentComponent"></component>
</div>
</template>
<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
const currentComponent = ref('ComponentA');
</script>异步组件
使用 defineAsyncComponent 来延迟加载组件：
<template>
<div>
<component :is="asyncComponent"></component>
</div>
</template>
<script setup>
import { ref, defineAsyncComponent } from 'vue';
const asyncComponent = defineAsyncComponent(() => import('./ComponentA.vue'));
</script>Vue Router安装与配置
Vue Router 是 Vue.js 官方推荐的路由库，用于管理单页面应用中的导航。
安装 Vue Router
使用 npm 安装 Vue Router：
npm install vue-router@next配置路由
创建一个路由配置文件：
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 }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;在主应用中使用路由：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');路由参数与查询参数
路由参数
定义带参数的路由：
const routes = [
{ path: '/user/:id', component: User }
];访问带参数的路由：
<router-link :to="{ name: 'user', params: { id: 123 } }">User 123</router-link>在组件中访问参数：
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const userId = ref(route.params.id);查询参数
定义带查询参数的路由：
<router-link :to="{ path: '/search', query: { q: 'vue3' } }">Vue3 Search</router-link>在组件中访问查询参数：
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const query = ref(route.query);路由守卫
Vue Router 提供了多种路由守卫，可以在不同的时机对路由进行控制。
前置守卫
定义一个全局的前置守卫：
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes,
beforeEnter: (to, from, next) => {
if (to.meta.requiresAuth) {
// 检查是否已登录
next();
} else {
next('/');
}
}
});在路由中设置元信息：
const routes = [
{ path: '/user', component: User, meta: { requiresAuth: true } }
];导航守卫
定义一个全局的导航守卫：
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes,
beforeEach: (to, from, next) => {
if (to.meta.requiresAuth) {
// 检查是否已登录
next();
} else {
next('/');
}
}
});Vuex基础
Vuex 是 Vue.js 的状态管理库，用于在应用中集中管理状态。
安装 Vuex
使用 npm 安装 Vuex：
npm install vuex@next创建 Vuex Store
创建一个 Vuex Store：
import { createStore } from 'vuex';
import { ref } from 'vue';
export default createStore({
state: {
count: ref(0)
},
mutations: {
increment(state) {
state.count.value++;
}
},
actions: {
increment({ commit }) {
commit('increment');
}
},
getters: {
doubleCount(state) {
return state.count.value * 2;
}
}
});在主应用中使用 Vuex Store：
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
createApp(App).use(store).mount('#app');Vuex Store的创建与使用
在组件中使用 Vuex Store：
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
onMounted(() => {
console.log(store.state.count); // 输出当前计数
store.dispatch('increment');
console.log(store.state.count); // 输出计数增加后的结果
});Getter与Mutation
Getter
在 Vuex Store 中定义 Getter：
getters: {
doubleCount(state) {
return state.count.value * 2;
}
}在组件中使用 Getter：
import { ref, onMounted } from 'vue';
import { useStore, useGetter } from 'vuex';
const store = useStore();
const doubleCount = useGetter('doubleCount');
onMounted(() => {
console.log(doubleCount); // 输出当前计数的两倍
});Mutation
在 Vuex Store 中定义 Mutation：
mutations: {
increment(state) {
state.count.value++;
}
}在组件中使用 Mutation：
import { ref, onMounted } from 'vue';
import { useStore, useMutation } from 'vuex';
const store = useStore();
const mutation = useMutation('increment');
onMounted(() => {
mutation(); // 执行 mutation
});小项目实战演练
创建一个简单的登录表单应用。
创建项目结构
mkdir login-app
cd login-app
vue create .
npm install axios创建登录表单组件
创建一个登录表单组件 LoginForm.vue：
<template>
<div>
<form @submit.prevent="handleLogin">
<label>
Username:
<input v-model="username" type="text" required>
</label>
<label>
Password:
<input v-model="password" type="password" required>
</label>
<button type="submit">Login</button>
</form>
</div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
const username = ref('');
const password = ref('');
async function handleLogin() {
try {
const response = await axios.post('/api/login', { username: username.value, password: password.value });
if (response.data.success) {
console.log('Login successful!');
} else {
console.error('Login failed!');
}
} catch (error) {
console.error('Error:', error);
}
}
</script>创建后端模拟接口
创建一个简单的后端接口来模拟登录请求。可以使用 Express.js 来搭建后端。
- 安装 Express.js：
npm install express- 创建后端服务器
server.js：
const express = require('express');
const app = express();
const PORT = 3001;
app.use(express.json());
app.post('/api/login', (req, res) => {
const { username, password } = req.body;
if (username === 'admin' && password === 'password') {
res.json({ success: true });
} else {
res.status(401).json({ success: false });
}
});
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});- 启动后端服务器：
node server.js常见问题与解决方法
问题：组件内数据变化但页面不更新
确保数据是响应式的，使用 ref 或 reactive 来创建响应式数据。
import { ref } from 'vue';
const count = ref(0);问题：路由跳转后页面样式丢失
确保在路由配置中正确引入全局样式文件。
import './App.css';问题：Vue3与旧版本代码兼容
使用 Vue3 的 compat 模式来兼容旧版本代码：
import { createApp, compat } from 'vue';
import App from './App.vue';
createApp(App).use(compat).mount('#app');Vue3项目部署
部署到 GitHub Pages
- 安装 gh-pages：
npm install gh-pages --save-dev- 在
package.json中添加homepage和predeploy脚本：
{
"name": "my-vue3-app",
"version": "1.0.0",
"homepage": "https://<your-github-username>.github.io/<your-repo-name>",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
}
}- 构建项目并部署：
npm run predeploy
npm run deploy- 访问部署链接：
https://<your-github-username>.github.io/<your-repo-name>部署到 Netlify
-
创建 Netlify 账号并登录。
- 使用 Netlify 的 CLI 进行部署：
npm install netlify-cli --save-dev- 在
package.json中添加部署脚本：
{
"name": "my-vue3-app",
"version": "1.0.0",
"scripts": {
"build": "vue-cli-service build",
"deploy": "netlify deploy --dir=dist"
}
}- 构建并部署项目：
npm run build
npm run deploy点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦