2024年最全一文学会使用Vue3，掌握这些知识点再也不怕面试通不过

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

---

注意:3.0中的生命周期钩子要比2.X中相同生命周期的钩子要快

Composition API还新增了以下调试钩子函数：但是不怎么常用

• onRenderTracked

• onRenderTriggered

代码演示

setup() {

onBeforeMount(() => {

console.log(‘–onBeforeMount’)

})

onMounted(() => {

console.log(‘–onMounted’)

})

onBeforeUpdate(() => {

console.log(‘–onBeforeUpdate’)

})

onUpdated(() => {

console.log(‘–onUpdated’)

})

onBeforeUnmount(() => {

console.log(‘–onBeforeUnmount’)

})

onUnmounted(() => {

console.log(‘–onUnmounted’)

})

}

toRefs

---

作用

把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个 ref

应用

我们使用reactive创建的对象，如果想在模板中使用，就必须得使用xxx.xxx的形式,如果大量用到的话还是很麻烦的,但是使用es6解构以后,会失去响应式,那么toRefs的作用就体现在这,，利用toRefs可以将一个响应式 reactive 对象的所有原始属性转换为响应式的ref属性。当然小伙伴们可以自行开发更多应用场景。

代码演示

name:{{name}}

provide 与 inject

---

作用

实现跨层级组件(祖孙)间通信

代码演示

父组件

父组件

当前颜色: {{color}}

<button @click=“color=‘red’”>红

<button @click=“color=‘yellow’”>黄

<button @click=“color=‘blue’”>蓝

---

子组件

子组件

---

孙子组件

孙子组件: {{color}}

其他特性

===============================================================

Teleport(瞬移)

---

作用

Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示 换句话说就是可以把 子组件 或者 dom节点 插入到任何你想插入到的地方去。

语法

使用to属性 引号内使用选择器

代码演示

//父组件

App

//子组件

<button @click=“modalOpen = true”>

点我打开对话框

class=“looklook”>

看看我出现在了哪里

<button @click=“modalOpen = false”>

Close

可以看到在子组件中的looklook元素跑到了body下面,而之前的位置默认出现了两行注释

Suspense(不确定的)

---

作用

它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验

语法

LOADING...

vue3中引入异步组件的方式

const AsyncComp = defineAsyncComponent(() => import(‘./AsyncComp.vue’))

代码演示

父组件

LOADING...

子组件

AsyncComp22

{{msg}}

通过下图可以看到在异步组件加载出来之前,显示的是fallback中的内容

响应式数据的判断

---

作用

• isRef: 检查一个值是否为一个 ref 对象

• isReactive: 检查一个对象是否是由 reactive 创建的响应式代理

• isReadonly: 检查一个对象是否是由 readonly 创建的只读代理

• isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

代码演示

setup() {

const state1 = ref(1);

console.log(‘isref:’, isRef(state1));//isref: true

const state2 = reactive({});

console.log(‘isReactive:’, isReactive(state2));//isReactive: true

const state3 = readonly({});

console.log(‘isReadonly:’, isReadonly(state3));//isReadonly: true

const state4 = reactive({});

console.log(‘isProxy:’, isProxy(state2));//isProxy: true

console.log(‘isProxy:’, isProxy(state4));//isProxy: true

return {};

},

其他不常用特性

---

还有很多很多不常用的新特性，我在日常开发中是没有用到的，很多都是用来做优化的，感兴趣的小伙伴们自行去官网查看，或者大佬们可以介绍一下应用场景。

• shallowReactive

• shallowRef

• readonly

• shallowReadonly

• markRaw

• customRef

• …

语法糖

==============================================================

虽然Composition API用起来已经非常方便了，但是我们还是有很烦的地方，比如

• 组件引入了还要注册

• 属性和方法都要在setup函数中返回，有的时候仅一个return就十几行甚至几十行

• …

• 不想写啊怎么办

好办，Vue3官方提供了script setup语法糖

只需要在script标签中添加setup，组件只需引入不用注册，属性和方法也不用返回，setup函数也不需要，甚至export default都不用写了，不仅是数据，计算属性和方法，甚至是自定义指令也可以在我们的template中自动获得。

但是这么过瘾的语法糖，还是稍微添加了一点点心智负担，因为没有了setup函数，那么props，emit，attrs怎么获取呢，就要介绍一下新的语法了。

setup script语法糖提供了三个新的API来供我们使用：defineProps、defineEmit和useContext

• defineProps 用来接收父组件传来的值props。

• defineEmit 用来声明触发的事件表。

• useContext 用来获取组件上下文context。

代码演示

---

父组件

我是父组件！

<Child msg=“hello”

@child-click=“handleClick” />

子组件

<span @click=“sonClick”>msg: {{ props.msg }}

我们点击一下子组件

可以看到context被打印了出来，其中的attrs、emit、slots、expose属性和方法依然可以使用。 props也可以输出在页面上，事件也成功派发。

其他知识点

================================================================

接下来介绍一下我使用Vue3过程中遇到的问题或者小技巧，不全面，想起什么就写什么吧

script setup语法糖请注意

---

如果在父组件中通过ref='xxx'的方法来获取子组件实例，子组件使用了script setup语法糖,那么子组件的数据需要用expose的方式导出，否则会因为获取不到数据而报错。

代码演示

父组件

我是父组件！

子组件先不使用语法糖

我是子组件{{msg}}

可以看到现在是获取不到子组件定义的msg属性的

我们可以看看尤大大怎么说

Emit派发事件可以对参数进行验证

---

父组件

我是父组件！

<Child @sonClick=‘sonClick’ />

子组件

我是子组件{{ msg }}

<button @click=“handleClick(1)”>我是按钮1

<button @click=“handleClick(2)”>我是按钮2

我们分别点一下按钮1和按钮2，可以看到当我们点了按钮2的时候，控制台会发出警告，但是程序会继续执行，还没想到什么适合的应用场景，但是要知道这个知识点，小伙伴们可以在这搞事情。

跨组件通讯mitt.js

---

Vue2中怎么实现跨组件通讯呢,很多人第一想法就是event bus。但是Vue3移除了$on,$once,$off导致不能使用这个方法。但是Vue官方给大家推荐了mitt.js,它的原理就是event bus。

代码演示

先安装

npm i mitt -s

然后封装一个hook

//mitt.js

import mitt from ‘mitt’

const emitter = mitt();

export default emitter;

父组件

我是父组件！

子组件1

我是子组件1

{{msg}}

子组件2

我是子组件2

<button @click=‘changeMsg’>点击修改msg

演示

自定义指令

---

先看看Vue2自定义指令的钩子

• bind：当指令绑定在对应元素时触发。只会触发一次。

• inserted：当对应元素被插入到 DOM 的父元素时触发。

• update：当元素更新时，这个钩子会被触发（此时元素的后代元素还没有触发更新）。

• componentUpdated：当整个组件（包括子组件）完成更新后，这个钩子触发。

• unbind：当指令被从元素上移除时，这个钩子会被触发。也只触发一次。

在 Vue3 中，官方为了更有助于代码的可读性和风格统一，把自定义指令的钩子名称改的更像是组件生命周期，尽管他们是两回事

• bind => beforeMount

• inserted => mounted

• beforeUpdate: 新的钩子，会在元素自身更新前触发

• update => 移除！

• componentUpdated => updated

• beforeUnmount: 新的钩子，当元素自身被卸载前触发

• unbind => unmounted

过渡动画

---

这个没有什么大的改动，只是修改了两个class名字，正是因为没有什么大的改动，导致我曾经在这里栽了大跟头，写完了怎么都不对，后来查官网才知道。

以下是直接引用 官网的原文

• v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

• v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

• v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。

• v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

• v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

• v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除)，在过渡/动画完成之后移除。

特别注意的是v-enter改成了v-enter-form，v-leave改成了v-leave-from。

其他小知识

---

Vue3移除了filter

获取组件实例方法getCurrentInstance()

这个方法可以获取到当前组件的实例，相当于Vue2中的this，但是要注意在 开发环境 和 生产环境 的使用方法是不同的。

毕竟是个人总结，难免会出现纰漏和错误，期待各路大神的补充和纠正。

文末福利

===============================================================

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了**《95页前端学习笔记》**电子稿文件。

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

👉点击这里免费获取👈

html5/css3

• HTML5 的优势

• HTML5 废弃元素

• HTML5 新增元素

• HTML5 表单相关元素和属性

• CSS3 新增选择器

• CSS3 新增属性

• 新增变形动画属性

• 3D变形属性

• CSS3 的过渡属性

• CSS3 的动画属性

• CSS3 新增多列属性

• CSS3新增单位

• 弹性盒模型

JavaScript

• JavaScript基础

• JavaScript数据类型

• 算术运算

• 强制转换

• 赋值运算

• 关系运算

• 逻辑运算

• 三元运算

• 分支循环

• switch

• while

• do-while

• for

• break和continue

• 数组

• 数组方法

• 二维数组

• 字符串

正则表达式

• 创建正则表达式

• 元字符

• 模式修饰符

• 正则方法

• 支持正则的 String方法

js对象

• 定义对象

• 对象的数据访问

• JSON

• 内置对象

• Math 方法

• Date 方法

面向对象是一种编程思想

• 定义对象

• 原型和原型链

• 原型链

• 原型

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

BOM

• BOM概述

• window方法

• frames [ ] 框架集

• history 历史记录

• location 定位

• navigator 导航

• screen 屏幕

• document 文档

DOM

• DOM对象方法

• 操作DOM间的关系

• DOM节点属性

事件

• 事件分类

• 事件对象

• 事件流

• 事件目标

• 事件委派(delegate)

• 事件监听

jQuery

• jQuery 选择器

• 属性选择器

• 位置选择器

• 后代选择器

• 子代选择器

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！