VUE3常见面试题总结（看这一篇就够了）

目次

1、vue2和vue3相应式原理
2、Vue3带来了什么
3、composition API 上风好处特点
4、setup配置
5、ref与reactive
6、计算属性
7、watch与watchEffect
8、provide与inject
9.vue3新的生命周期钩子
10、自界说hook函数
11、toRef和toRefs
12、shallowReactive 与 shallowRef
13、readonly 与 shallowReadonly
14、toRaw与markRaw转换为普通数据和标记属性非相应式
15、customRef 自界说ref利用
16、vue3中的父传子，子传父
17、相应式数据的判断isRef、isReactive、isReadonly、isProxy
18、vue3中利用插槽？
19、vue3中路由保卫onBeforeRouteLeave，onBeforeRouteUpdate？
20、vue3中利用vuex useStore？
21、vue3中利用vue-router，useRoute和useRouter ？
22、vue3单文件组件 script setup语法？
23、vue3中nextTick利用
24、原型绑定全局属性
25、vue3中利用keeplive ？
26、element-plus组件库vant3.0ant
27、vue3中废弃了过滤器1、过滤器：过滤器可以普通明白成是一个特别的方法，用来加工数据的

---

1、vue2和vue3相应式原理

Vue2和Vue3的相应式原理都是基于Object.defineProperty实现的，但是Vue3在性能和功能上做了一些优化和改进。
Vue2的相应式原理：

• Vue2通过Object.defineProperty对data中的属性进行劫持，当属性值发生变革时，会触发对应的更新函数，从而更新视图。
  
• Vue2通过Watcher来实现数据与视图的双向绑定，当数据发生变革时，Watcher会关照对应的视图进行更新。
  
• Vue2的相应式原理存在一些缺陷，例如无法监听数组的变革，需要通过特别的方法来实现.
  

Vue3的相应式原理：

• Vue3利用Proxy代替了Object.defineProperty，Proxy可以监听到对象的所有属性，包括新增和删除利用。
  
• Vue3利用了WeakMap来存储依赖关系，制止了Vue2中Watcher的内存走漏问题。
  
• Vue3支持了多个根节点的组件，可以更方便地进行组件的复用和组合。
  

2、Vue3带来了什么

   

• 更快的渲染速率：Vue3利用了Proxy署理对象，可以更快地跟踪数据变革，从而提高渲染速率。
  
• 更小的体积：Vue3的体积比Vue2更小，同时也支持按需加载，淘汰了页面加载时间。
  
• 更好的TypeScript支持：Vue3对TypeScript的支持更加美满，可以更好地进行类型查抄和代码提示。
  
• 更好的组件封装：Vue3引入了Composition API，可以更好地封装组件逻辑，使得组件更加可复用和易维护。
  
• 更好的相应式系统：Vue3的相应式系统进行了重构，可以更好地处置惩罚嵌套对象和数组的变革，同时也提供了更多的API来处置惩罚相应式数据。
  总之，Vue3带来了更好的性能、更小的体积、更好的TypeScript支持、更好的组件封装和更好的相应式系统，使得开发者可以更加高效地开发Vue应用。
  

  3、composition API 上风好处特点

3.1、为什么要选择组合式API？
   由于vue2有局限性：
  

• 组件的逻辑膨胀导致组件的可读性变差；
  
• 无法跨组件重用代码；
  
• vue2对TS的支持有限
  

  3.2、组合式API办理了什么问题？
   1、面对vue2的局限性，可以将雷同的代码组织在一起，而不会散落在各个角落
  3.3、组合式API的长处？
   

• composition API是根据逻辑相关性组织代码的，提高可读性和维护性
  
• 代码量少，更好的重用逻辑代码
  
• 没有引入新的语法，只是单纯函数
  
• 异常灵活
  
• 工具语法提示友好，因为是单纯函数所以很容易实现语法提示、主动补偿
  
• 更好的Typescript支持
  
• 在复杂功能组件中可以实现根据特性组织代码，代码内聚性强
  
• 组件间代码复用
  

  4、setup配置

   Vue 3中的 setup 函数接收两个参数，分别是 props 和 context。
  1、props：值为对象，包罗: 组件外部通报过来。切组件内部声明接收了的属性。需要留意的是，Vue3中的 props 是只读的，即在setup 函数中不能修改 props 的值。如果需要修改通报过来的数据，可以利用相应式对象或ref。
  2、context：上下文对象。
  

• attrs:值为对象，包罗组件外部通报过来，但没有在props配置中声明的属性。相当于this.$attrs
  
• slots:收到的插槽内容，相当于this.$slots
  
• emit:分发自界说事件的函数，相当于this.$emit
  

    留意：
  1、这个钩子会在created之前执行
  2、内部不存在this
  3、如果返回值是一个对象，那么这个对象中的键值对会被归并到created钩子的this中，而在视图上也能访问相应的数据值
  5、ref与reactive

   reactive:
  (1)、它的相应式是更加‘深条理’的，底层本质是将传入的数据包装成一个Proxy。
  (2)、参数必须是对象或者数组，如果要让对象的某个元素实现相应式时比较麻烦。需要利用toRefs
  ref:
  (1)、函数参数可以是基本数据类型，也可以接受对象类型
  (2)、如果参数是对象类型时，实在底层的本质还是reactive,系统会主动根据我们给ref传入的值转换成：reactive
  (3)、在template中访问，系统会主动添加.value;在js中需要手动.value
  (4)、ref相应式原理是依赖于Object.defineProperty()的get()和set()的。
  6、计算属性

6.1、什么是计算属性：
   1、computed函数，是用来界说计算属性的，计算属性不能修改。
  2、模板内的表达式非常便利，但是设计它们的初志是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
  3、计算属性还可以依赖多个Vue 实例的数据，只要此中任一数据变革，计算属性就会重新执行，视图也会更新。
  methods和computed看起来都可以实现我们的功能， 那么为什么还要多一个计算属性这个东西呢？
   原因：
  1、计算属性会进行缓存，如果多次利用时，计算属性只会调用一次；
  2、而方法会利用一次则调用一次，因此计算属性相对而言性能更好。
  留意：
   

• 回调函数必须return，效果就是计算的效果
  
• 如果计算属性依赖的数据发生变革，那么会重新计算
  
• 不要在计算中中进行异步利用
  

  高级：computed有两个方法，分别是set()和get()。
   

• 计算属性可以直接读取或者修改
  
• 如果要实现计算属性的修改利用，那么computed的实参应该是对象
  

  

• 读取数据触发get方法
  
• 修改数据触发set方法，set函数的形参就是你赋给他的值
  

  
7、watch与watchEffect

   1、watch和watchEffect都是vue3中的监听器，但是在写法和利用上是有区别的，主要是介绍一下watch和watchEffect的利用方法以及他们之间的区别。
  2、 watch 的工作原理：侦听特定的数据源，并在回调函数中执行副作用。它默认是惰性的——只有当被侦听的源发生变革时才执行回调，不过，可以通过配置 immediate 为 true 来指定初始时立刻执行第一次。可以通过配置 deep 为 true，来指定深度监视。
  3、immdiate: 默认情况下，侦听器需要 data 背面值改变了才会见效，若需要侦听器一进入页面就见效，那就需要利用 immediate。 4、deep: 默认情况下，侦听器只会监听数据自己的改变，若要进行深度监听，那就需要利用 deep。 5、immediate 和 deep 配置在第三个参数对象里。 第一个参数：监听谁，第二个参数：回调函数，第三个参数：配置对象
  7.1、watchEffect
   watchEffect 函数的特点：
  

• 长处：
  
  
  
  • 会主动收集依赖，不需要手动通报侦听内容——主动侦听回调函数中利用到的相应式数据。
    
  • 默认 immdiate 是 true，所以初始化时会立刻执行。
    
  
  
• 缺点：
  
  
  
  • 无法得到变革前的值（oldVal）。
    
  
  

  1、watch() 是懒执行的：当数据源发生变革时，才会执行回调。但在某些场景中，我们盼望在创建侦听器时，立刻执行一遍回调。
  2、watchEffect相当于将watch 的依赖源和回调函数归并，当任何你有用到的相应式依赖更新时，该回调函数便会重新执行。差异于 watch，watchEffect 的回调函数会被立刻执行（即 { immediate: true }）
  3、简单来说，watchEffect 是 Vue3 中的一个相应式 API，它答应你监听相应式状态的变革，并在其发生变革时触发副作用函数。这个特性非常有用，在我们需要对相应式数据进行利用的时候，我们可以在监听到变革后马上做出反应。
  8、provide与inject

   1、provide和inject是一对新的API，用于在父组件中提供数据，然后在子组件中注入数据。
  2、provide：是一个对象，或者是一个返回对象的函数。里面呢就包罗要给子孙后代的东西，也就是属性和属性值。
  3、inject：一个字符串数组，或者是一个对象。属性值可以是一个对象，包罗from和default默认值。

1. //在父组件中，使用provide提供数据：
2. //name：定义提供 property的 name。
3. //value ：property的值。
4. setup(){
5.    provide('info',"值")
6.   }
7. ​
8. //在子组件中，使用inject注入数据
9. //name：接收 provide提供的属性名。
10. //default：设置默认值，可以不写，是可选参数。
11. setup(){
12.    const info = inject("info")
13.    inject('info',"设置默认值")
14.    return {
15.        info
16.    }
17.   }
18. ​
19. //需要注意的是，provide和inject只能在setup函数中使用，而且provide提供的数据只能在其子组件中使用。如果要在兄弟组件中共享数据，可以使用一个共享的对象或者使用Vuex等状态管理库。

复制代码

9.vue3新的生命周期钩子

   Vue3中新增了两个生命周期钩子函数：
  

• beforeUnmount：在组件卸载之前调用，可以用来做一些清算工作，比如取消订阅、清除定时器等。
  
• onRenderTracked：在组件渲染时调用，可以用来监视组件的状态变革，比如打印组件的状态、记载组件的变革等。
  

  除此之外，Vue3还对原有的生命周期钩子函数进行了优化和改进，比如：
  

• beforeCreate和created归并为setup函数，使得组件的初始化更加简便和灵活。
  
• beforeMount和mounted归并为onMounted函数，使得组件的挂载更加高效和可控。
  
• beforeUpdate和updated归并为onUpdated函数，使得组件的更新更加精准和可靠。
  
• beforeDestroy和destroyed归并为onUnmounted函数，使得组件的卸载更加安全和可靠。
  

  
  执行终极顺序：
  Vue3生命周期：setup
  Vue2生命周期：beforeCreate
  Vue2生命周期：created
  Vue3生命周期：onBeforeMount
  Vue2生命周期：beForeMount
  Vue3生命周期：onMounted
  Vue2生命周期：mounted
  Vue3生命周期：onBeforeUpdate
  Vue2生命周期：beforeUpdate
  Vue3生命周期：onUpdated
  Vue2生命周期：updated
  Vue3生命周期：onBeforeUnmount
  Vue2生命周期：beforeUnmount
  Vue3生命周期：onUnmounted
  Vue2生命周期：unmounted
  10、自界说hook函数

   1、以函数情势抽离一些可复用的方法像钩子一样挂着，随时可以引入和调用，实现高内聚低耦合的目的；
  2、将可复用功能抽离为外部JS文件
  3、函数名/文件名以use开头，形如：useXX
  4、引用时将相应式变量或者方法显式解构袒露出来如：const {nameRef，Fn} = useXX()
  （在setup函数解构出自界说hooks的变量和方法）
  10.1、Vue3自界说Hooks和Vue2期间Mixin的关系：
   Mixin不敷 在 Vue 2 中，mixin 是将部分组件逻辑抽象成可重用块的主要工具。但是，他们有几个问题： 1、Mixin 很容易发生冲突：因为每个 mixin 的 property 都被归并到同一个组件中，所以为了制止 property 名冲突，你仍然需要了解其他每个特性。 2、可重用性是有限的：我们不能向 mixin 通报任何参数来改变它的逻辑，这低落了它们在抽象逻辑方面的灵活性。
  10.2、vue3自界说hooks和vue2中mixin的区别和比较？
   1、Mixin难以追溯的方法与属性！Vue3自界说Hooks却可以
  2、无法向Mixin通报参数来改变逻辑，但是Vue3自界说Hooks却可以：
  3、Mixin同名变量会被覆盖，Vue3自界说Hook可以在引入的时候对同名变量重定名
  11、toRef和toRefs

   toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref，而且它既保留了相应式，也保留了引用，也就是你从 reactive 复制过来的属性进行修改后，除了视图会更新，原有 ractive 里面对应的值也会跟着更新，如果你知道 浅拷贝 的话那么这个引用就很好明白了，它复制的实在就是引用 + 相应式 ref 不加 s 和 加 s 的区别就是如许：
  toRef: 复制 reactive 里的单个属性并转成 ref toRefs: 复制 reactive 里的所有属性并转成 ref
  
12、shallowReactive 与 shallowRef

   1、shallowRef：只处置惩罚基本数据类型的相应式
  2、shallowReactive：只处置惩罚对象最外层属性的相应式（浅相应式）
  3、浅层作用的相应式数据处置惩罚：只处置惩罚第一层对象的数据，再往下嵌套的数据，利用数据是不起作用的
  4、shallowReative与shallowRef在某些特别的应用场景下,是可以提升性能的,前者针对对象,用于浅层作用的相应式数据处置惩罚,而后者只处置惩罚基本数据类型的相应式,不进行对象的相应式处置惩罚。
  13、readonly 与 shallowReadonly

   readonly与shallowReadonly都是让相应式数据只具备读的能力,后者是浅条理的只读,也就是只对数据对象第一层起作用,深条理的嵌套,当时用shallowReadonl()处置惩罚时,深条理数据支持被修改
  1、readonly: 让一个相应式数据变为只读的 (深只读)，让一个相应式数据变为只读的,接收一个相应式数据,经过readonly加工处置惩罚一下,那么新赋值的数据都不答应修改
  2、接受一个对象 (岂论是相应式还是普通的) 或是一个 ref，返回一个原值的只读署理
  3、shallowReadonly: 让一个相应式数据变为只读的 (浅只读)，接收一个相应式数据,经过shallowreadonly的处置惩罚,酿成一个只读的,只考虑对象的第一层数据,不可以修改,但是第一层嵌套里的深层数据却支持修改
  4、让一个相应式数据变为只读能力(浅只读)
  14、toRaw与markRaw转换为普通数据和标记属性非相应式

   toRaw，将相应式对象（由 reactive界说的相应式）转换为普通对象，然后赋值给新的变量（不影响原来的对象）
  markRaw，标记一个对象，使其不能成为一个相应式对象。
  toRaw: 作用： 将一个由 reactive 天生的相应式对象转为普通对象 利用场景：
  1、用于读取相应式对象对应的普通对象
  2、对这个普通对象的所有利用，不会引起页面更新。
  markRaw: 作用：标记一个对象，使其永远不会再成为相应式对象 应用场景： 1、有些值不应被设置为相应式的，例如复杂的第三方类库等 2、当渲染具有不可变数据源的大列表时，跳过相应式转换可以提高性能
  
15、customRef 自界说ref利用

   1、customRef：返回一个ref对象，可以体现的控制依赖追踪和触发相应
  16、vue3中的父传子，子传父

   1、父传子：
  1、在父组件的子组件标签上通过：传到子组件的数据名=‘需要通报的数据’
  2、子组件中通过props进行接收并在模板中利用
  2、子传父：
  1、子组件触发事件通过setup函数的第二个参数，context.emit来实现子传父
  17、相应式数据的判断isRef、isReactive、isReadonly、isProxy

   1、isRef：判断一个值是否为一个 ref 对象
  2、isReactive：判断一个对象是否是由 reactive创建的相应式署理
  3、isReadonly：判断一个对象是否是由 readonly 创建的只读署理
  4、isProxy：判断一个对象是否是由 reactive 或 readonly 创建的署理
  18、vue3中利用插槽？

   1、插槽 slot 通常用于两个父子组件之间，最常见的应用就是我们利用一些 UI 组件库中的弹窗组件时，弹窗组件的内容是可以让我们自界说的，这就是利用了插槽的原理。
  2、明白：
  

• slot 是 Vue3 中的内置标签。
  
• slot 相当于给子组件挖出了一个槽，可以用来填充内容。
  
• 父组件中调用子组件时，子组件标签之间的内容元素就是要放置的内容，它会把 slot 标签替换掉
  

  3、具名插槽：具有名字的 插槽。简单来说这个具名插槽的目的就是让一个萝卜一个坑，让它们呆在该呆的位置去。比如带 name 的插槽<slot name="xx">被称为具名插槽
  4、作用域插槽：能够接受参数的插槽就被称为了作用域插槽。
  19、vue3中路由保卫onBeforeRouteLeave，onBeforeRouteUpdate？

   vue-router 提供的导航保卫主要用来通过跳转或取消的方式保卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。
  1、vue3 router中新增的onBeforeRouteLeave方法表示添加一个导航保卫，此方法会在组件将要脱离的时候触发，类似于以前的beforeRouteLeave，但onBeforeRouteLeave可以在任何组件中利用，当组件被卸载的时候，导航保卫也将被移除。当我们利用router执行跳转或返回的时候，就会触发onBeforeRouteLeave方法。
  2、 onBeforeRouteUpdate：添加一个导航保卫，在当前位置即将更新时触发。

1. import { onBeforeRouteUpdate } from "vue-router";
2. onBeforeRouteUpdate(to => {
3.   console.log(to, "路由变动");
4. });
5. ​

复制代码

3、onBeforeRouteLeave：添加一个导航保卫，在当前位置的组件将要脱离时触发。

1. //使用组件内守卫，对离开页面事件做一些操作，
2. beforeRouteLeave(to, from, next){
3.     if(from.path=='/b'){ //当前页面路由
4.         next({replace: true,redirect: '/a'}); //目标路由 重定向
5.     }else {
6.     next()
7.     }
8. }

复制代码

  20、vue3中利用vuex useStore？

   1、在Vue3中，可以利用useStore函数来获取Vuex store实例。useStore函数是一个Vue Composition API函数，它可以在组件中利用。

1. 使用`useStore`函数的步骤如下：
2. ​
3. 1. 在组件中导入`useStore`函数和`createStore`函数。
4. ​
5. import { useStore, createStore } from 'vuex'
6. ​
7. 2. 创建一个Vuex store实例。
8. ​
9. const store = createStore({
10.  state: {
11.    count: 0
12.   },
13.  mutations: {
14.    increment(state) {
15.      state.count++
16.    }
17.   }
18. })
19. ​
20. 3. 在组件中使用`useStore`函数来获取Vuex store实例。
21. ​
22. export default {
23.  setup() {
24.    const store = useStore()
25.    return {
26.      store
27.    }
28.   }
29. }
30. ​
31. ​
32. 4. 在组件中使用Vuex store实例。
33. ​
34. <template>
35.  <div>
36.    <p>Count: {{ store.state.count }}</p>
37.    <button @click="store.commit('increment')">Increment</button>
38.  </div>
39. </template>
40. ​
41. <script>
42. import { useStore } from 'vuex'
43. ​
44. export default {
45.  setup() {
46.    const store = useStore()
47.    return {
48.      store
49.    }
50.   }
51. }
52. </script>

复制代码

21、vue3中利用vue-router，useRoute和useRouter ？

   1、在Vue.js中，useRoute和useRouter是Vue Router提供的两个钩子函数，用于在组件中访问路由信息和路由实例。
  2、useRoute相当于是vue2中的this.$route

1. import { useRoute } from 'vue-router'
2. export default {
3. setup() {
4. const route = useRoute()
5. console.log(route.path) // 当前路由路径
6. return {
7.   route
8. }
9. }
10. }

复制代码

3、useRouter相当于是vue2中的this.$router，可以利用useRouter进行路由跳转

1. import { useRouter } from 'vue-router'
2. export default {
3. setup() {
4. const router = useRouter()
5. console.log(router.currentRoute.value.path) // 当前路由路径
6. ​
7. return {
8.   router
9. }
10. }
11. }

复制代码

4、区别：
  useRoute函数返回当前路由的信息对象，包括路由路径、参数、查询参数等信息。
  useRouter函数返回Vue Router的实例，我们可以在组件中利用useRouter函数来获取Vue Router的实例。
  22、vue3单文件组件 script setup语法？

   1、<script setup>是在单文件组件 (SFC) 中利用组合式 API的编译时语法糖。相比于普通的 <script> 语法，它具有更多上风
  

• 更少的样板内容，更简便的代码
  
• 能够利用纯 Typescript 声明 props 和抛失事件。
  
• 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间署理)。
  
• 更好的 IDE 类型推断性能 (淘汰语言服务器从代码中抽离类型的工作)。
  

  
23、vue3中nextTick利用

   1、nextTick 是将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立刻利用它
  2、异步利用：

1. import { nextTick } from 'vue'
2. //异步使用
3. setup() {
4. const message = ref('Hello!')
5. const changeMessage = async newMessage => {
6.   message.value = newMessage
7.   await nextTick()
8.   console.log('Now DOM is updated')
9. }
10. }
11. //基本使用
12. nextTick(()=>{
13.  ...
14. })

复制代码

  24、原型绑定全局属性

   1、通过config.globalProperties
  2、通过provide注入：在应用实例上设置一个可以被注入到应用范围内所有组件中的值。当组件要利用应用提供的 provide 值时，必须用 inject 来接收。
  3、在main.js中全局引入，然后在组件中获取
  25、vue3中利用keeplive ？

   1、keep-alive是Vue提供的一个抽象组件，主要用于保留组件状态或制止重新渲染。
  2、<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是烧毁他们。
  和<transition> 相似，<keep-alive> 是一个抽象组件，它自身不会渲染一个DOM元素，也不会出如今父组件链中。但是 keep-alive 会把其包裹的所有组件都缓存起来。
  3、利用：
  1、配置app.vue 利用v-if判断是否缓存
  2、添加meta属性，在路由元信息中添加缓存的标识
  3、实现页面的部分刷新
  26、element-plus组件库vant3.0ant

   
  27、vue3中废弃了过滤器1、过滤器：过滤器可以普通明白成是一个特别的方法，用来加工数据的

   2、vue3要精简代码，并且filter功能重复，filter能实现的功能，methods和计算属性基本上也可以实现。所以就干脆把filter这方面的vue源码给删掉，如许的话，更加方便维护。

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