Vue3 全家桶，从 0 到 1 实战项目，面试必备知识点总结

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

一、vue3.0 创建项目

---

vue3 创建项目的时候有两种方式，第一种就是官方推荐的 vite 。另外一种就是使用 webpack 创建。

1.1、vite 创建项目

vite 需要 Node.js >= 12.x版本。所以使用 vite 搭建项目之前，请先检查 node 版本！

运行 ：$ npm init vite@latest 命令，然后按照提示信息选择创建项目的类型。具体的步骤可以参考《什么，你还使用 webpack？别人都在用 vite 搭建项目了》文章。

也可以通过附加命令行选项，指定使用的模板。如：

npm init vite@latest my-vue-app --template vue

使用最新 vite 创建 vue 模板项目。

项目目录如图所示：

1.2、webpack 创建项目

使用 vue/cli 脚手架创建 vue3 项目时，需要升级 vue cli v4.5版本！使用 vue -V 检查版本，如果版本过低时，请全局重新安装。

npm install -g @vue/cli

使用命令，开始创建项目：

vue create project-name

选择需要创建 vue3 项目，根据提示创建项目就可以了。

1.3、vite 与 webpack 相比优缺点

Vite	Webpack
vite 启动不需要打包，开发服务器比 Webpack 快 10-100 倍	webpack先打包，然后启动服务，比 vite 慢很多
热更新时，按需加载	热更新时，全部加载
仅支持 vue3	支持 vue 各个版本
与 CommonJS 模块不完全兼容	支持 CommonJs

在本篇文章内，我们选择 第一种方式 vite 创建一个 learn-vue3 的项目。

二、vue-router4

---

项目创建完成之后，我们要做的第一件事就是配置路由了，添加路由的时候，需要在 main.js 内引入 router。

main.js 代码：

import { createApp } from ‘vue’

import App from ‘./App.vue’

createApp(App).mount(‘#app’)

此时发现与 vue2 的创建实例完全不一样，vue3 使用的是 createApp ，使用前需要先引入。

2.1、引入路由

在 vue3 中使用 vue-router 时，需要安装 vue-router 4 。

npm install vue-router@4

安装之后可以在 package.json 文件中查看 vue-router 的版本。

{

“dependencies”: {

“vue”: “^3.2.25”,

“vue-router”: “^4.0.12”

}

}

vue-router 4 的大多数的 API 是保持不变的，但是在 vue3 中以插件形式存在，所以在创建的时候有一定的改变。

新建 router 文件夹，新建 index.js 文件

// 1、按需引入方法

import { createRouter, createWebHashHistory } from “vue-router”

// 2、定义一些路由

const routes = [

// 每个路由都需要映射到一个组件

]

//3、创建路由实例

const router = createRouter({

routes,

history:createWebHashHistory(“./”)

})

export default router

然后到 main.js 中，将路由挂载到实例上。

import { createApp } from ‘vue’

import App from ‘./App.vue’

import router from “./router/index”

createApp(App)

//整个应用支持路由

.use(router)

.mount(‘#app’)

2.2、新建组件配置路由

在 src 目录下，新建 pages 文件夹，新建 index.vue 文件：

首页入口

在 router.js 文件内，定义路由

const routes = [

{

path:“/”,

component:()=>import(“…/pages/index.vue”)

}

]

然后在 App.vue 文件内添加 router-view 容器。

此时运行项目的时候就能看到新建的 index.vue 的内容了。

三、vue-router4 结合 composition API 使用

---

3.1、composition API

composition API 中文叫做组合式API，它是 Vue3 特有的，同时 vue3 也能够向下兼容 Options API。

setup 函数就是 composition API 的入口，是处于生命周期钩子函数 beforeCreate 和 created 两个函数之间，所以 setup 中的属性和方法在外部使用时，需要先 return 暴漏出去。

修改 index.vue 组件，采用 composition API 。

3.2、响应式数据

上述的实例中中，如果我们在 template 内，打印 msg 的时候，就会发现响应式失效。

{{ msg }}

是因为在 setup 内地自定义属性不具备响应式能力。vue3 的响应式原理是 通过底层代理 proxy 将数据包装一下，使得具有响应式。vue3 的响应式原理详情可查看《vue3 学习笔记 (五)——vue3 的 setup 如何实现响应式功能？》——vue3 的 setup 如何实现响应式功能？》")

此处 msg 是一个基础数据类型，可以通过 ref 包装下数据，ref 使用之前需要从 vue 中先引入。修改 script 中的代码

此时在 input 或在 setup 内改变 msg 的值,如：

此时无论如何修改 msg 都会保证实时响应。

与 ref 类似的还有 reactive 。ref 是让基础数据类型具有响应式，reactive 是让引用数据类型具有响应式。

3.3、组合式内如何使用路由？

一个项目中，导航选项卡是很常见的，在 App.vue 文件内，加入两个导航：

首页

我的

如果把上述路由跳转方式修改成 push 时，如何修改呢？

composition API 内使用路由时，需要先导入 userRouter 方法，调用该方法，生成 router。

如：

import { useRouter } from ‘vue-router’

const router = useRouter()

router 是路由【导航对象】。

想要获取当前路由时，使用 useRoute 方法，如：

import { useRoute } from ‘vue-router’

const route = useRoute()

route 是当前激活的路由状态信息对象，包含所有路由中的参数，params, query 都属于它。

修改上边路由跳转方式使用 push ，代码如下：