首頁手記 Vue3考點解析：從入門到進階的詳細教程

Vue3考點解析：從入門到進階的詳細教程

標簽：

Vue.js 面試源碼

本文详细介绍了Vue3的基础概念、安装方法和核心特性，涵盖了从安装步骤到响应式系统、Composition API、组件系统以及Vue Router与Axios的集成，全面解析了相关知识。

Vue3基础概念与安装

介绍Vue3的核心概念

Vue.js 是一个用于构建用户界面的渐进式框架。Vue3是Vue.js的最新版本，它在性能、易用性以及开发者体验方面都有显著提升。核心概念如下：

响应式数据绑定：Vue使用一个响应式系统来追踪数据的变化，当数据发生变化时，视图会自动更新。
组件化开发：Vue提倡组件化开发模式，允许开发者将界面拆分为独立可复用的组件。
模板语法：Vue提供了基于HTML的模板语法，允许开发者声明式地描述界面。
Composition API：Vue3引入了新的Composition API，允许开发者更好地组织和重用逻辑。
虚拟DOM：Vue使用虚拟DOM来提高程序的渲染效率。

Vue3的安装步骤

安装Vue3有两种主要方式：全局安装Vue CLI（命令行工具）或直接在项目中安装Vue的依赖。

全局安装Vue CLI

全局安装Vue CLI：

npm install -g @vue/cli

创建一个新的Vue项目：

vue create my-vue3-project

选择Vue 3版本：

? Please pick a preset:
> default (recommended)
custom (让你自定义选择特性)
Use arrow keys to navigate (← and →), press ↓ to go down, press ↑ to go up, press ? to get more options, press S to search, press q to go back, press A or J to go back a level, press E to go to the top, press C to clear, or press X to clear the current line.

选择default（recommended）后，按Enter确认，并选择Vue 3版本，然后等待安装完成。

直接在项目中安装Vue依赖

初始化一个新的项目：

npm init -y

安装Vue3的相关依赖：

npm install vue@next

安装模板编译器：

npm install @vue/compiler-sfc

创建第一个Vue3项目

在本节中，我们将创建一个简单的Vue3项目，展示如何使用setup函数和Composition API。

步骤1：初始化项目

创建项目目录并安装必要的依赖：

mkdir my-vue3-app
cd my-vue3-app
npm init -y
npm install vue@next
npm install @vue/compiler-sfc

步骤2：创建项目文件结构

my-vue3-app/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   └── App.vue
├── package.json
└── index.js

步骤3：编写代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 App</title>
</head>
<body>
    <div id="app"></div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./src/main.js"></script>
</body>
</html>

App.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="message" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue3!');
</script>

<style scoped>
h1 {
  color: #343a40;
}
</style>

main.js

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

createApp(App).mount('#app');

运行项目

在项目根目录下运行以下命令启动项目：

npm run serve

这将启动一个开发服务器，并在浏览器中打开项目页面。

响应式系统

理解Vue3的响应式原理

Vue3的响应式系统是通过JavaScript的Proxy对象实现的。当创建响应式数据时，Vue会为数据对象生成一个代理对象，并拦截数据对象的所有属性访问，使得数据变化时可以触发视图更新。

使用ref和reactive创建响应式数据

ref

ref用于创建基本类型的响应式变量。基本类型包括数字、布尔值和字符串等。

import { ref } from 'vue';

const count = ref(0);

reactive

reactive用于创建对象或数组的响应式数据。

import { reactive } from 'vue';

const state = reactive({
  message: 'Hello, reactive!',
  count: 0
});

响应式数组和对象的操作

数组操作

Vue3提供了reactive和ref来处理数组的响应式变化。当对响应式数组进行修改时，Vue会自动检测变化并更新视图。

import { reactive } from 'vue';

const list = reactive(['apple', 'banana', 'orange']);

list.push('grape');  // 响应式更新

对象操作

对响应式对象的属性进行修改时，也需要通过代理对象进行操作。

import { reactive } from 'vue';

const user = reactive({
  name: 'John',
  age: 30
});

user.name = 'Jane';  // 响应式更新

Composition API

Composition API的基础用法

Composition API 提供了更灵活的方式来组织组件逻辑。setup函数是Composition API的入口点，它会在组件挂载前执行。

基本用法

import { ref, reactive } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const user = reactive({
      name: 'John',
      age: 30
    });

    return {
      count,
      user
    };
  }
};

setup函数的使用

setup函数接收两个参数：props和context。props包含了父组件传递给当前组件的属性，context包含了渲染上下文信息。

import { ref, reactive } from 'vue';

export default {
  setup(props, context) {
    const count = ref(props.initialCount);
    const user = reactive({
      name: props.name,
      age: 30
    });

    function increment() {
      count.value += 1;
    }

    return {
      count,
      user,
      increment
    };
  }
};

使用setup与Vue2中生命周期钩子的区别

在Vue2中，生命周期钩子通常在mounted、created等函数中定义，而在Composition API中，这些钩子可以通过onMounted、onBeforeMount等函数使用。

Vue2中生命周期钩子

export default {
  data() {
    return {
      message: 'Hello, Vue2!'
    };
  },
  mounted() {
    console.log('Component mounted');
  }
};

Vue3中的Composition API

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue3!');

    onMounted(() => {
      console.log('Component mounted');
    });

    return {
      message
    };
  }
};

Vue3组件系统

Vue3组件的基本使用

Vue3组件的定义和使用与Vue2类似，但有一些新的特性和改进。

基本组件

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Component!');
</script>

槽与插槽的高级用法

基本用法

<template>
  <div>
    <h1>{{ title }}</h1>
    <slot></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const title = ref('Main Title');
</script>

使用插槽时：

<CustomComponent title="Custom Title">
  <p>This is a custom slot content.</p>
</CustomComponent>

命名插槽

<template>
  <div>
    <h1>{{ title }}</h1>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const title = ref('Main Title');
</script>

使用命名插槽时：

<CustomComponent title="Custom Title">
  <template v-slot:header>
    <h2>This is a named slot with header.</h2>
  </template>
  <p>This is a default slot content.</p>
</CustomComponent>

混入与自定义指令

混入

const mixin = {
  setup() {
    const message = ref('Mixin message');

    return {
      message
    };
  }
};

export default {
  setup() {
    const message = ref('Component message');

    return {
      message
    };
  },
  mixins: [mixin]
};

自定义指令

<template>
  <div v-mycustom-directive></div>
</template>

<script setup>
import { createApp, directive } from 'vue';

const myCustomDirective = directive((el, binding) => {
  el.style.backgroundColor = binding.value;
});

createApp(App).directive('myCustomDirective', myCustomDirective).mount('#app');
</script>

Vue Router与Axios集成

Vue Router的基本配置

首先，需要安装vue-router：

npm install vue-router@next

基本配置

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

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

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

export default router;

// 路由守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login');
  } else {
    next();
  }
});

Axios的安装与使用

首先，需要安装axios：

npm install axios

基本使用

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Axios与Vue3项目的集成

配置Axios

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000
});

export default instance;

使用Axios

import axios from './axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Vue3考点总结与实战练习

常见面试题解析

响应式原理

Vue3中响应式数据的原理是基于Proxy对象来实现的。当创建响应式数据时，Vue会生成一个Proxy代理对象，该对象会拦截数据对象的所有属性访问，当属性发生变化时，会触发视图更新。

Composition API

Composition API 提供了setup函数来组织和重用逻辑，它允许在组件中更好地管理状态和逻辑，避免过多的选项对象带来的问题。

Vue Router与Axios的集成

Vue Router可以通过配置路由守卫实现权限控制，Axios可以通过创建一个实例来统一管理请求，方便在项目中复用。

项目实战演练

在本节中，我们将构建一个简单的博客应用，使用Vue3、Vue Router和Axios。

项目结构

my-vue3-blog/
├── public/
│   └── index.html
├── src/
│   ├── main.js
│   ├── router.js
│   ├── axios.js
│   ├── components/
│   │   ├── PostList.vue
│   │   └── PostDetail.vue
│   └── App.vue
├── package.json
└── index.js

创建组件

PostList.vue

<template>
  <div>
    <h1>Post List</h1>
    <ul>
      <li v-for="post in posts" @click="goToPost(post.id)">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import axios from '../axios';
import { useRouter } from 'vue-router';

const router = useRouter();
const posts = ref([]);

axios.get('/api/posts')
  .then(response => {
    posts.value = response.data;
  })
  .catch(error => {
    console.log(error);
  });

const goToPost = (postId) => {
  router.push(`/posts/${postId}`);
};
</script>

PostDetail.vue

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
  </div>
</template>

<script setup>
import axios from '../axios';
import { useRoute } from 'vue-router';

const route = useRoute();
const postId = ref(route.params.postId);

const post = ref({});

axios.get(`/api/posts/${postId.value}`)
  .then(response => {
    post.value = response.data;
  })
  .catch(error => {
    console.log(error);
  });
</script>

配置路由

router.js

import { createRouter, createWebHistory } from 'vue-router';
import PostList from '../components/PostList.vue';
import PostDetail from '../components/PostDetail.vue';

const routes = [
  { path: '/', component: PostList },
  { path: '/posts/:postId', component: PostDetail }
];

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

export default router;

主应用文件

App.vue

<template>
  <router-view></router-view>
</template>

<script setup>
import router from './router';
import { createApp } from 'vue';

createApp(App).use(router).mount('#app');
</script>

运行项目

npm run serve

Vue3与前后端整合的实践技巧

前后端分离

前后端分离可以通过API接口实现数据交互，前端使用Axios请求数据，后端使用如Node.js或Spring Boot实现API接口。

跨域问题

跨域问题可以通过在后端设置CORS（跨源资源共享）来解决。

后端配置CORS

// Node.js express
const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors());

app.get('/api/posts', (req, res) => {
  res.json([
    { id: 1, title: 'Post 1', content: 'Content 1' },
    { id: 2, title: 'Post 2', content: 'Content 2' }
  ]);
});

app.listen(3000);

静态资源处理

静态资源如图片、CSS、JavaScript文件可以通过配置Web服务器来处理，如Nginx或Apache。

Nginx配置

server {
  listen 80;
  server_name localhost;

  location / {
    root /path/to/static/files;
    try_files $uri $uri/ /index.html;
  }
}

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

守候你守候我

手記
篇

粉絲

14

獲贊與收藏

37

關注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節 32074 358

Scrapy 入門教程

27個小節 11039 263

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Vue3考點解析：從入門到進階的詳細教程

介绍Vue3的核心概念

Vue3的安装步骤

全局安装Vue CLI

直接在项目中安装Vue依赖

创建第一个Vue3项目

步骤1：初始化项目

步骤2：创建项目文件结构

步骤3：编写代码

index.html

App.vue

main.js

运行项目

理解Vue3的响应式原理

使用ref和reactive创建响应式数据

ref

reactive

响应式数组和对象的操作

数组操作

对象操作

Composition API的基础用法

基本用法

setup函数的使用

使用setup与Vue2中生命周期钩子的区别

Vue2中生命周期钩子

Vue3中的Composition API

Vue3组件的基本使用

基本组件

槽与插槽的高级用法

基本用法

命名插槽

混入与自定义指令

混入

自定义指令

Vue Router的基本配置

基本配置

Axios的安装与使用

基本使用

Axios与Vue3项目的集成

配置Axios

使用Axios

常见面试题解析

响应式原理

Composition API

Vue Router与Axios的集成

项目实战演练

项目结构

创建组件

PostList.vue

PostDetail.vue

配置路由

router.js

主应用文件

App.vue

运行项目

Vue3与前后端整合的实践技巧

前后端分离

跨域问题

后端配置CORS

静态资源处理

Nginx配置

閱讀免費教程