2024 前端Vue面试题大全汇总 (82道)_vue面试题2024

• 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，官描述的是

• 
  
  • 前后端分离
    
  
  
• 
  
  • 不必要修改既有代码，就可以拦截 Ajax 哀求，返回模拟的相应数据。
    
  
  
• 
  
  • 数据范例丰富
    
  
  
• 
  
  • 通过随机数据，模拟各种场景。
    
  
  

总结：在后端接没有开辟完成之前，前端可以已有的接档，在真实的哀求上拦截 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 区别

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

58、v-if 和 v-show

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

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

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

60、介绍 Vue 插槽用法

插槽slot可以理解为占坑，当使用一个组件的时间，在组件标签里的对应的内容就会替换掉这个组件中的slot标签。
插槽分为默认插槽，具名插槽，作用域插槽。
默认插槽子组件中用slot标签来确定渲染位置，父组件使用它时直接在子组件的标签内写入内容即可

1. //子组件
2. <template>
3.     <slot />
4. </template>
6. //父组件
7. <Child>
8.   <div>默认插槽</div>
9. </Child>

复制代码

具名插槽
顾名思义就是具有名字的插槽，子组件中可以用name认识对slot命名，父组件在使用的时间通过template中的v-slot:name大概#name来界说这个插槽中的内容

1. //子组件
2. <template>
3.   <slot ></slot>
4. </template>
6. //父组件
7. <Child>
8.     <template v-slot:content>具名插槽内容</template>
9. </Child>

复制代码

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

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

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

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

1. <li>商品价格：{{item.price | filterPrice}}</li>
3. filters: { filterPrice (price) { return price ? ('￥' + price) : '--' } }

复制代码

注意 vue3 已经移除了过滤器
62、常见的变乱修饰符及其作用

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

63、v-model 如何实现的

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

1. <input v-model="message" />
2. 等同于
3. <input
4.    :value="message"
5.    @input="message=$event.target.value"
6. >

复制代码

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: 什么是自界说指令

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

它的 binding 会是这个对象

1. {
2.     arg: 'foo',
3.     modifiers: { bar: true },
4.     value: /* `baz` 的值 */,
5.     oldValue: /* 上一次更新时 `baz` 的值 */
6. }

复制代码

---

回复 2: 你用自界说指令做过哪些功能

• 数据埋点, 通过绑定自界说变乱传入点击当前元素必要埋点的变乱名, 在指令中监听当前元素的点击变乱后调用配景接口将变乱名传入
  
• 权限控制, 通过绑定自界说变乱传入控制当前元素的权限字段, 在指令中获取到当前元素根据权限字段来控制该元素的状态 (表现, 隐藏等)
  

66、computed 和 watch

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

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

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

67、vue 生命周期

Vue2(选项式 API)
Vue3(setup)
描述
beforeCreate
-
实例创建前
created
-
实例创建后
beforeMount
onBeforeMount
DOM 挂载前调用
mounted
onMounted
DOM 挂载完成调用
beforeUpdate
onBeforeUpdate
数据更新之前被调用
updated
onUpdated
数据更新之后被调用
beforeDestroy
onBeforeUnmount
组件烧毁前调用
destroyed
onUnmounted
组件烧毁完成调用
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
子destroyed
父destroyed
注意如果子组件是异步组件的话它们的执行序次会发生改变，会先执行完父组件的生命周期然后再执行子组件的生命周期
69、vue 导航 (路由保卫)

路由保卫分为全局路由保卫，路由独享保卫，组件路由保卫

• 全局路由保卫
  

• beforeEach, 吸收to、from、next三个参数，每个路由跳转前都会触发，登录验证时用的比力多
  
• beforeResolve，和beforeEach类似，区别是在导航被确认之前，同时在所有组件内保卫和异步路由组件被解析之后调用
  
• afterEach，在路由跳转完成后调用，吸收 to、from 两个参数
  

• 路由独享保卫
  

beforeEnter, 一样平常设置在路由设置文件中（router/index.js），对进入某个路由之进步行相关操作

• 组件路由保卫
  

   吸收to、from、next三个参数
  

• beforeRouteEnter, 进入该组件之前调用，无法获取到 vue 实例
  
• beforeRouteUpdate，在当前路由改变，但是该组件被复用时调用
  
• beforeRouteLeave, 在离开当前组件时调用
  

70、Vue-Router 的懒加载如何实现

使用箭头函数 + import 动态加载

1. const router = new VueRouter({
2.   routes: [{ path: "/list", component: () => import("@/components/list.vue") }],
3. });

复制代码

71、路由的 hash 和 history 模式的区别

Vue-Router 有两种模式：hash 模式和 history 模式。默认的路由模式是 hash 模式。

• hash 模式
  

简介： hash 模式是开辟中默认的模式，它的 URL 带着一个 #，比方：www.abc.com/#/vue，它的 hash 值就是 #/vue。
特点：hash 值会出如今 URL 里面，但是不会出如今 HTTP 哀求中，对后端完全没有影响。以是改变 hash 值，不会重新加载页面。这种模式的欣赏器支持度很好，低版本的 IE 欣赏器也支持这种模式。hash 路由被称为是前端路由，已经成为 SPA（单页面应用）的标配。
原理： hash 模式的主要原理就是 onhashchange() 变乱：

1. window.onhashchange = function (event) {
2.   console.log(event.oldURL, event.newURL);
3.   let hash = location.hash.slice(1);
4. };

复制代码

• history 模式
  

简介： history 模式的 URL 中没有 #，它使用的是传统的路由分发模式，即用户在输入一个 URL 时，服务器会吸收这个哀求，并解析这个 URL，然后做出相应的逻辑处理。 特点： 当使用 history 模式时，URL 就像这样：abc.com/user/id。相比 hash 模式更加好看。但是，history 模式必要配景设置支持。如果配景没有正确设置，访问时会返回 404。 API： history api 可以分为两大部分，切换汗青状态和修改汗青状态：
修改汗青状态：包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，这两个方法应用于欣赏器的汗青记录栈，提供了对汗青记录进行修改的功能。只是当他们进行修改时，虽然修改了 url，但欣赏器不会立刻向后端发送哀求。如果要做到改变 url 但又不刷新页面的效果，就必要前端用上这两个 API。
切换汗青状态： 包括 forward()、back()、go() 三个方法，对应欣赏器的进步，退却，跳转操作。
总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，很多细节注意不到。
  
• 算法方面还是很单薄，好在面试官都很平和可亲，擅长发现人的美哈哈哈…（最好多刷一刷，否则影响你的工资和成功率）
  
• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前相识业务，也可以帮助后期优秀 offer 的决策。
  
• 要勇于说不，对于某些 offer 待遇不满足、业务不喜好，应该相信自己，不要由于当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生存要慎重选择！！！
  

第一次跳槽十分忐忑不安，和没毕业的时间开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮助的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～
祝大家都有美好的将来，拿下满足的 offer。
加入社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。