2024年最新2023 前端Vue面试题大全汇总 (82道)_vue面试题2023(1)，2024年最新2024Web前端开发面试解答_vue最新面试题

最后

喜欢的话别忘了关注、点赞哦~

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

26、说出至少 4 种 vue 指令和它的用法？

• v-if：判断是否隐藏；
• v-for：数据循环；
• v-bind:class：绑定一个属性；
• v-model：实现双向绑定

27、v-if 和 v-show 的区别

• v-if 通过控制 dom 节点的方式，添加和删除元素，进而实现显示或隐藏元素，v-show 通过设置 dom 元素的 display 来实现显示或隐藏的操作，并不会删除 dom
• v-if 隐藏会将组件销毁，显示时会将其内部的监听事件重建，v-show 只是设置 display，并不会阻止子组件内部的监听事件
• v-if 有着更高的切换消耗，v-show 有着更高的初始渲染消耗

28、为什么避免 v-if 和 v-for 一起用？

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，只检查它一次，且不会在 v-if 为否的时候运算 v-for。

29、什么是 MVVM ？

• 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
• MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。
• ViewModel 通过双向数据绑定把 View 层和 Model 层连接起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

30、vuex是什么？怎么使用？哪种功能场景使用它？

vue中状态管理。在main.js引入store注入。新建一个目录store 。场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

31、vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

32、vuex的State特性

• Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。
• state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。
• 通过mapState和 mapGetters 把全局 state 和 getters 映射到当前组件的 computed 计算属性中。

33、vuex的Getter特性

• getters 可以对State进行计算操作，它就是Store的计算属性。
• 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用。
• 如果一个状态只在一个组件内使用，可以不用getters。

34、vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

35、不用Vuex会带来什么问题？

• 可维护性会下降，想修改数据要维护三个地方；
• 可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
• 增加耦合，大量的上传派发，会让耦合性大大增加，Vue用Component本意就是为了减少耦合，现在这么用，和组件化的初衷相背。

36、keep-alive 的作用是什么?

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

37、vue-loader 是什么？用途有哪些？

解析.vue文件的一个加载器。

用途：js 可以写es6、style样式可以scss或less、template可以加jade等。

38、如何获取 dom

在我们的 vue 项⽬中，难免会因为引⽤第三⽅库⽽需要操作 DOM 标签，vue 为我们提供了 ref 属性。ref 被⽤来给元素或⼦组件注册引⽤信息。引⽤信息将会注册在⽗组件的 $refs 对象上。如果在普通的 DOM 元素上使⽤，引⽤指向的就是 DOM 元素；如果⽤在⼦组件上，引⽤就指向组件实例

39、iframe 的优缺点？

iframe 也称作嵌⼊式框架，嵌⼊式框架和框架⽹页类似，它可以把⼀个⽹页的框架和内容嵌⼊在现有的⽹页中。
优点：

• 解决加载缓慢的第三⽅内容如图标和⼴告等的加载问题
• Security sandbox
• 并⾏加载脚本
• ⽅便制作导航栏

缺点：

• iframe 会阻塞主页⾯的 Onload 事件
• 即使内容为空，加载也需要时间
• 没有语意

40、请说出 vue.cli 项⽬中 src ⽬录每个⽂件夹和⽂件的⽤法？

assets ⽂件夹是放静态资源；components 是放组件；router 是定义路由相关的配置; view 视图；app.vue 是⼀个应⽤主组件；main.js 是⼊⼝⽂件

41、vue 常⽤的修饰符

• .stop: 等统⼀ JavaScript 中的 event.stopPropagation(), 防⽌事件冒泡
• .prevent: 等同于 JavaScript 中的 event。preventDefault(), 防⽌执⾏预设的⾏为 (如果事件可取消，则取消该事件，⽽不停⽌事件的进⼀步
• capture: 与事件冒泡的⽅向相反，事件捕获由外到内
• self: 只会触发⾃⼰范围内的事件，不包含⼦元素；
• once: 只会触发⼀次。

42、⾃定义指令（v-check、v-focus）的⽅法有哪些？它有哪些钩⼦函数？还有哪些钩⼦函数参数？

• 全局定义指令：在 vue 对象的 directive ⽅法⾥⾯有两个参数，⼀个是指令名称，另外⼀个是函数。组件内定义指令：directives
• 钩⼦函数：bind（绑定事件触发）、inserted(节点插⼊的时候触发)、update（组件内相关更新）
• 钩⼦函数参数：el、binding

43、vue 的两个核⼼点

数据驱动，组件系统

• 数据驱动：ViewModel，保证数据和视图的⼀致性
• 组件系统：应⽤类 UI 可以看做全部是由组件树构成的

44、delete 和 Vue.delete 删除数组的区别

• delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
• Vue.delete 直接删除了数组 改变了数组的键值

45、Vue-router 跳转和 location.href 有什么区别

使⽤ location.href=/url 来跳转，简单⽅便，但是刷新了页⾯；使⽤ history.pushState(/url), ⽆刷新页⾯，静态跳转；引进 router，然后使⽤ router.push(/url) 来跳转，使⽤了 diff 算法，实现了按需加载，减少了 dom 的消耗。其实使⽤ router 跳转和使⽤ history.pushState() 没什么差别，因为 vue-router 就是⽤了 history.pushState(), 尤其是在 history 模式下。

46、RouterLink 在 IE 和 Firefox 中不起作⽤（路由不跳转）的问题

⽅法⼀
只⽤ a 标签，不使⽤ button 标签
⽅法⼆
使⽤ button 标签和 Router.navigate ⽅法

47、请说下封装 vue 组件的过程？

⾸先，组件可以提升整个项⽬的开发效率。能够把页⾯抽象成多个相对独⽴的模块，解决了我们传统项⽬开发：效率低、难维护、复⽤性等问题。

然后，使⽤ Vue.extend ⽅法创建⼀个组件，然后使⽤ Vue.component ⽅法注册组件。⼦组件需要数据，可以在 props 中接受定义。⽽⼦组件修改好数据后，想把数据传递给⽗组件。可以采⽤ emit ⽅法。

48、params 和 query 的区别

⽤法：query 要⽤ path 来引⼊，params 要⽤ name 来引⼊，接收参数都是类似的，分别是 this.

r

o

u

t

e

r

.

q

u

e

r

y

.

n

a

m

e

和

t

h

i

s

.

router.query.name 和 this.

router.query.name和this.router.params.name。url 地址显⽰：query 更加类似于我们 ajax 中 get 传参，params 则类似于 post，说的再简单⼀点，前者在浏览器地址栏中显⽰参数，后者则不显⽰

注意点：query 刷新不会丢失 query ⾥⾯的数据 params 刷新会丢失 params ⾥⾯的数据

49、vue mock 数据

在项⽬中尝试了 mockjs，mock 数据，实现前后端分离开发。关于 mockjs，官⽹描述的是

• 1. 前后端分离
• 2. 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
• 3. 数据类型丰富
• 4. 通过随机数据，模拟各种场景。

总结：在后端接⼝没有开发完成之前，前端可以⽤已有的接⼝⽂档，在真实的请求上拦截 ajax，并根据 mockjs 的 mock 数据的规则，模拟真实接⼝返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。

与以往的⾃⼰模拟的假数据不同，mockjs 可以带给我们的是：在后台接⼝未开发完成之前模拟数据，并返回，完成前台的交互；在后台数据完成之后，你所做的只是去掉 mockjs：停⽌拦截真实的 ajax，仅此⽽已。

50、vue 初始化页⾯闪动问题

使⽤ vue 开发时，在 vue 初始化之前，由于 div 是不会 vue 管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于 {{message}} 的字样，虽然⼀般情况下这个时间很短暂，但是我们还是有必要解决这个问题的。

⾸先：在 css ⾥加上 [v-cloak]{display:none;}，如果没有彻底解决问题，则在根元素加上 style=“display:none;” :style=“{display:block}”

51、vue 更新数组时触发视图更新的⽅法

push();pop();shift();unshift();splice();sort();reverse()

52、vue 常⽤的 UI 组件库

Mint UI，element，VUX

53、mint-ui 是什么？怎么使⽤？说出⾄少三个组件使⽤⽅法？

基于 vue 的前端组件库。npm 安装，然后 import 样式和 js，vue.use（mintUi）全局引⼊。在单个组件局部引⼊：import {Toast} from ‘mint-ui’。

• 组件⼀：Toast(‘登录成功’)；
• 组件⼆：mint-header；
• 组件三：mint-swiper

54、Vue ⾥⾯ router-link 在电脑上有⽤，在安卓上没反应怎么解决？

Vue 路由在 Android 机上有问题，babel 问题，安装 babel polypill 插件解决

55、Vue2 中注册在 router-link 上事件⽆效解决⽅法

使⽤ @click.native。原因：router-link 会阻⽌ click 事件，.native 指直接监听⼀个原⽣事件。

56、简述 MVVM 框架

Model: 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。

View: 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。

ViewModel: 监听数据模型的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View。

57、vue2 和 vue3 区别

1. 写法上的区别: vue2 使用的是options(选项)Api,vue3 的是composition Api(当然 vue3 也兼容composition api)。options Api中methods，compute，data等 api 都是分散的。而composition api中的代码是根据逻辑功能来组织的, 我们可以将一个功能所定义的methods，compute，data等 api 会放在一起, 让我们可以更灵活地组合组件逻辑。
2. vue2 将响应式数据放到 data 函数中, 而 vue3 则是使用ref和reactive将数据声明为响应式
3. 响应式实现方式: vue2 中是通过Object.defineProperty对数据劫持实现的, vue3 中则是使用Proxy对数据代理实现的。
4. 生命周期区别: vue3 中将beforeCreate和created合并到了setup函数中
5. 根节点: vue3 组件允许多个根节点, 而 vue2 只允许一个
6. 内置组件: vue3 新增了传送组件Teleport和异步依赖处理组件Suspense

58、v-if 和 v-show

1. v-if表示一个 dom 元素是否被创建，而v-show则是控制这个 dom 元素的display属性是否为none
2. 一般在频繁切换状态的地方使用v-show,v-if则更适合条件不经常改变的场景，因为它切换开销相对较大

59、v-for 和 v-if 优先级

1. 开发过程中一般不建议同时将 v-for 和 v-if 放在一个标签中使用
2. Vue2 中 v-for 的优先级会更高，所以会先执行循环，再进行 v-if 判断，所以这样就会导致无论需不需展示这个元素，都会先遍历整个列表
3. 在 Vue3 中 v-if 的优先级会更高，但是当我们遍历一个数组的时候，根据数组中的某个元素进行 v-if 判断的时候就会报错，因为 v-if 会先执行此时还没有拿到这个数组。所以 Vue3 中会报错

60、介绍 Vue 插槽用法

插槽slot可以理解为占坑，当使用一个组件的时候，在组件标签里的对应的内容就会替换掉这个组件中的slot标签。

插槽分为默认插槽，具名插槽，作用域插槽。

默认插槽子组件中用slot标签来确定渲染位置，父组件使用它时直接在子组件的标签内写入内容即可

//子组件
<template>
    <slot />
</template>

//父组件
<Child>
  <div>默认插槽</div>
</Child>



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

具名插槽

顾名思义就是具有名字的插槽，子组件中可以用name熟悉对slot命名，父组件在使用的时候通过template中的v-slot:name或者#name来定义这个插槽中的内容

//子组件
<template>
  <slot ></slot>
</template>

//父组件
<Child>
    <template v-slot:content>具名插槽内容</template>
</Child>



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

作用域插槽

子组件中的slot可以通过类似组件属性传递的方式将子组件的值传递给父组件中这个子组件的插槽内容中（子组件标签内），在父组件使用子组件的时候要用v-slot的值进行接收这些参数，默认插槽可以将其直接写在子组件标签上，具名插槽则写在template上。而传过来的值只能在子组件标签中或者template标签中使用。所以在父组件作用域中获取到了子组件作用域中的变量，可以认为作用域插槽延伸了子组件数据的作用范围，因此叫做作用域插槽

61、过滤器的作用，如何实现一个过滤器

过滤器是用来过滤数据的，在 Vue 中使用 filters 来过滤数据，filters 不会修改数据，而是过滤数据，改变用户看到的输出

使用场景：

• 需要格式化数据的情况，比如需要处理时间、价格等数据格式的输出 / 显示。
• 比如后端返回一个 年月日的日期字符串，前端需要展示为 多少天前 的数据格式，此时就可以用 fliters 过滤器来处理数据。

过滤器是一个函数，它会把表达式中的值始终当作函数的第一个参数。过滤器用在插值表达式 {{}} 和 v-bind 表达式 中，然后放在操作符 “ | ” 后面进行指示

<li>商品价格：{{item.price | filterPrice}}</li>

filters: { filterPrice (price) { return price ? ('￥' + price) : '--' } }



1
2
3
4
5
6

注意 vue3 已经移除了过滤器

62、常见的事件修饰符及其作用

• .stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡；
• .prevent ：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
• .capture ：将事件改成捕获模式, 由外到内触发
• .self ：只会触发自己范围内的事件，不包含子元素；
• .once ：只会触发一次。

63、v-model 如何实现的

v-model 其实是一个语法糖, 比如

<input v-model="message" />
 等同于
<input
   :value="message"
   @input="message=$event.target.value"
>



1
2
3
4
5
6
7
8
9

63、Vue2 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？

Vue2 中对象添加新属性绑定的视图不会更新, 因为 Vue2 中 Object.defineProperty 劫持不到 data 对象中新增的属性, 可以使用this.$set(this.obj, 'b', 'obj.b')解决

$set() 方法相当于手动的去把 obj.b 处理成一个响应式的属性，此时视图也会跟着改变了。

64、Vue 插件用法

面试一般会问你如何写一个 vue 插件, 所以没写过 vue 插件的最好去亲自体验一下

回答:

vue实例会有一个use函数, 它接受的是一个带有install函数的对象和一个可选的选项对象, 当我们使用 vue.use(plugin)或者app.use(plugin)会调用我们插件的install属性的函数, 并且将当前组件的实例传进来. 所以在插件中就可以对这个实例进行一些操作来实现我们插件的功能

65、Vue 自定义指令

vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。面试经常会问什么是自定义指令? 你用自定义指令做过哪些功能?

回答 1: 什么是自定义指令?

1. 自定义指令包含局部指令和全局指令, 在模板中使用指令前必须先使用directives选项注册。局部指令指在某个组件中注册, 而全局则是将指令注册到全局, 通常在 main.js 中注册。
2. 自定义指令由一个包含类似组件生命周期钩子的对象来定义。它的生命周期钩子包含created,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted,
3. 常用的钩子为mounted 和 updated, 它接受el,binding等参数.binding参数的值一般包含绑定到这个元素上的信息, 比如下面这个指令

<div v-example:foo.bar="baz">



1
2
3
4

它的 binding 会是这个对象

 {
    arg: 'foo',
    modifiers: { bar: true },
    value: /* `baz` 的值 */,
    oldValue: /* 上一次更新时 `baz` 的值 */
 }



1
2
3
4
5
6
7
8
9

---

回答 2: 你用自定义指令做过哪些功能?

1. 数据埋点, 通过绑定自定义事件传入点击当前元素需要埋点的事件名, 在指令中监听当前元素的点击事件后调用后台接口将事件名传入
2. 权限控制, 通过绑定自定义事件传入控制当前元素的权限字段, 在指令中获取到当前元素根据权限字段来控制该元素的状态 (显示, 隐藏等)

66、computed 和 watch

1. computed 是计算属性, 依赖其它属性值, 用于解决模板中放入过多的逻辑会让模板过重且难以维护的问题.watch 是侦听器, 当我们需要根据一个属性的变化而做出一些处理的时候, 可以使用 watch 来对这个属性进行监听
2. computed 具有缓存的特点, 即当它所依赖的属性发生改变的时候它才会重新执行内部逻辑. 如下代码

<template>
    <div>{{ addSum }}</div>
    <div>{{ addSum }}</div>
    <div>{{ addSum }}</div>
</template>
<script setup>
import { computed, ref, watch } from "vue";
const a = ref(1)
const b = ref(2)
let addSum = computed(() => {
    console.log('内部逻辑执行')
    return a.value + b.value
})
</script>



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

页面多次使用addSum, 但是只会打印一次 “内部逻辑执行”

1. watch 在页面首次加载的时候默认不会执行, 需要设置immediate:true首次才会执行监听
2. watch 默认只监听一层数据, 不监听多层数据里属性的变化, 需要设置deep:true才会进行深度监听

67、vue 生命周期

68、vue 父子组件生命周期执行顺序

这个相对于上一个问题稍微复杂一点, 可以试着理解记忆或者直接记住吧

渲染过程

#mermaid-svg-czhhfdPqQmB0CYtp {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-czhhfdPqQmB0CYtp .error-icon{fill:#552222;}#mermaid-svg-czhhfdPqQmB0CYtp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-czhhfdPqQmB0CYtp .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-czhhfdPqQmB0CYtp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-czhhfdPqQmB0CYtp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-czhhfdPqQmB0CYtp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-czhhfdPqQmB0CYtp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-czhhfdPqQmB0CYtp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-czhhfdPqQmB0CYtp .marker.cross{stroke:#333333;}#mermaid-svg-czhhfdPqQmB0CYtp svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-czhhfdPqQmB0CYtp .label{font-family:“trebuchet ms”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-czhhfdPqQmB0CYtp .cluster-label text{fill:#333;}#mermaid-svg-czhhfdPqQmB0CYtp .cluster-label span{color:#333;}#mermaid-svg-czhhfdPqQmB0CYtp .label text,#mermaid-svg-czhhfdPqQmB0CYtp span{fill:#333;color:#333;}#mermaid-svg-czhhfdPqQmB0CYtp .node rect,#mermaid-svg-czhhfdPqQmB0CYtp .node circle,#mermaid-svg-czhhfdPqQmB0CYtp .node ellipse,#mermaid-svg-czhhfdPqQmB0CYtp .node polygon,#mermaid-svg-czhhfdPqQmB0CYtp .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-czhhfdPqQmB0CYtp .node .label{text-align:center;}#mermaid-svg-czhhfdPqQmB0CYtp .node.clickable{cursor:pointer;}#mermaid-svg-czhhfdPqQmB0CYtp .arrowheadPath{fill:#333333;}#mermaid-svg-czhhfdPqQmB0CYtp .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-czhhfdPqQmB0CYtp .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-czhhfdPqQmB0CYtp .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-czhhfdPqQmB0CYtp .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-czhhfdPqQmB0CYtp .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-czhhfdPqQmB0CYtp .cluster text{fill:#333;}#mermaid-svg-czhhfdPqQmB0CYtp .cluster span{color:#333;}#mermaid-svg-czhhfdPqQmB0CYtp div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-czhhfdPqQmB0CYtp :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;}

父beforeCreate

父created

父beforeMount

子beforeCreate

子created

子beforeMount

子mounted

父mounted

更新过程

#mermaid-svg-dU9lCSZuMx8fiJaw {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-dU9lCSZuMx8fiJaw .error-icon{fill:#552222;}#mermaid-svg-dU9lCSZuMx8fiJaw .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-dU9lCSZuMx8fiJaw .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-dU9lCSZuMx8fiJaw .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-dU9lCSZuMx8fiJaw .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-dU9lCSZuMx8fiJaw .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-dU9lCSZuMx8fiJaw .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-dU9lCSZuMx8fiJaw .marker{fill:#333333;stroke:#333333;}#mermaid-svg-dU9lCSZuMx8fiJaw .marker.cross{stroke:#333333;}#mermaid-svg-dU9lCSZuMx8fiJaw svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-dU9lCSZuMx8fiJaw .label{font-family:“trebuchet ms”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-dU9lCSZuMx8fiJaw .cluster-label text{fill:#333;}#mermaid-svg-dU9lCSZuMx8fiJaw .cluster-label span{color:#333;}#mermaid-svg-dU9lCSZuMx8fiJaw .label text,#mermaid-svg-dU9lCSZuMx8fiJaw span{fill:#333;color:#333;}#mermaid-svg-dU9lCSZuMx8fiJaw .node rect,#mermaid-svg-dU9lCSZuMx8fiJaw .node circle,#mermaid-svg-dU9lCSZuMx8fiJaw .node ellipse,#mermaid-svg-dU9lCSZuMx8fiJaw .node polygon,#mermaid-svg-dU9lCSZuMx8fiJaw .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-dU9lCSZuMx8fiJaw .node .label{text-align:center;}#mermaid-svg-dU9lCSZuMx8fiJaw .node.clickable{cursor:pointer;}#mermaid-svg-dU9lCSZuMx8fiJaw .arrowheadPath{fill:#333333;}#mermaid-svg-dU9lCSZuMx8fiJaw .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-dU9lCSZuMx8fiJaw .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-dU9lCSZuMx8fiJaw .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-dU9lCSZuMx8fiJaw .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-dU9lCSZuMx8fiJaw .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-dU9lCSZuMx8fiJaw .cluster text{fill:#333;}#mermaid-svg-dU9lCSZuMx8fiJaw .cluster span{color:#333;}#mermaid-svg-dU9lCSZuMx8fiJaw div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-dU9lCSZuMx8fiJaw :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;}

父beforeUpdate

子beforeUpdate

子updated

父updated

销毁过程

#mermaid-svg-ZdXs7utVab0XZIpe {font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZdXs7utVab0XZIpe .error-icon{fill:#552222;}#mermaid-svg-ZdXs7utVab0XZIpe .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-ZdXs7utVab0XZIpe .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-ZdXs7utVab0XZIpe .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-ZdXs7utVab0XZIpe .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-ZdXs7utVab0XZIpe .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-ZdXs7utVab0XZIpe .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-ZdXs7utVab0XZIpe .marker{fill:#333333;stroke:#333333;}#mermaid-svg-ZdXs7utVab0XZIpe .marker.cross{stroke:#333333;}#mermaid-svg-ZdXs7utVab0XZIpe svg{font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-ZdXs7utVab0XZIpe .label{font-family:“trebuchet ms”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-ZdXs7utVab0XZIpe .cluster-label text{fill:#333;}#mermaid-svg-ZdXs7utVab0XZIpe .cluster-label span{color:#333;}#mermaid-svg-ZdXs7utVab0XZIpe .label text,#mermaid-svg-ZdXs7utVab0XZIpe span{fill:#333;color:#333;}#mermaid-svg-ZdXs7utVab0XZIpe .node rect,#mermaid-svg-ZdXs7utVab0XZIpe .node circle,#mermaid-svg-ZdXs7utVab0XZIpe .node ellipse,#mermaid-svg-ZdXs7utVab0XZIpe .node polygon,#mermaid-svg-ZdXs7utVab0XZIpe .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-ZdXs7utVab0XZIpe .node .label{text-align:center;}#mermaid-svg-ZdXs7utVab0XZIpe .node.clickable{cursor:pointer;}#mermaid-svg-ZdXs7utVab0XZIpe .arrowheadPath{fill:#333333;}#mermaid-svg-ZdXs7utVab0XZIpe .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-ZdXs7utVab0XZIpe .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-ZdXs7utVab0XZIpe .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-ZdXs7utVab0XZIpe .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-ZdXs7utVab0XZIpe .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-ZdXs7utVab0XZIpe .cluster text{fill:#333;}#mermaid-svg-ZdXs7utVab0XZIpe .cluster span{color:#333;}#mermaid-svg-ZdXs7utVab0XZIpe div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:“trebuchet ms”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-ZdXs7utVab0XZIpe :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;}

父beforeDestroy

子beforeDestroy

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

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

ze:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-ZdXs7utVab0XZIpe :root{–mermaid-font-family:“trebuchet ms”,verdana,arial,sans-serif;}

父beforeDestroy

子beforeDestroy

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

[外链图片转存中…(img-DUnjx3wG-1715692365875)]

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-2c2Wdcxj-1715692365876)]

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