VUE3常见面试题总结大全(看这一篇就够了)实用指南

平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“VUE3常见面试题总结大全(看这一篇就够了)”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。

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

• s:收到的插槽内容，相当于this.$s

• 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默认值。

//在父组件中，使用provide提供数据：
//name：定义提供 property的 name。
//value ：property的值。
 setup(){
    provide('info',"值")
  }

//在子组件中，使用inject注入数据
//name：接收 provide提供的属性名。
//default：设置默认值，可以不写，是可选参数。
setup(){
    const info = inject("info")
    inject('info',"设置默认值")
    return {
        info
    }
  }

//需要注意的是，provide和inject只能在setup函数中使用，而且provide提供的数据只能在其子组件中使用。如果要在兄弟组件z共享数据，可以使用一个共享的对象或者使用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、插槽 通常用来两个父子组件之间，最常用的应用就是我们采用一些 UI 组件库中的弹窗组件时，弹窗组件的内容是能够让我们自定义的，这就是采用了插槽的原理。

2、理解：

• 是 Vue3 中的内置标签。

• 相当于给子组件挖出了一个槽，能够用来填充内容。

• 在这个场景下，父组件中调用子组件时，子组件标签之间的内容元素就是要放置的内容，它会把 标签替换掉

3、具名插槽：具有名字的 插槽。轻松来说这个具名插槽的目的就是让一个萝卜一个坑，让它们呆在该呆的位置去。比如带 name 的插槽< name="xx">被称为具名插槽

4、作用域插槽：能够接受参数的插槽就被称为了作用域插槽。

19、vue3中路由守卫onBeforeRouteLeave，onBeforeRouteUpdate？

vue-router 理解这一步时，提供的导航守卫主要用来借助跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

1、vue3 router中新增的onBeforeRouteLeave方法表示添加一个导航守卫，此方法会在组件将要离开的时候触发，类似于以前的beforeRouteLeave，但onBeforeRouteLeave能够在任何组件中采用，当组件被卸载的时候，导航守卫也将被移除。当我们采用router执行跳转或得到的时候，就会触发onBeforeRouteLeave方法。

2、 onBeforeRouteUpdate：添加一个导航守卫，在当前位置即将更新时触发。

import { onBeforeRouteUpdate } from "vue-router";
onBeforeRouteUpdate(to => {
   console.log(to, "路由变动");
});

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

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

20、vue3中采用vuex useStore？

1、在Vue3中，能够采用useStore函数来拿到Vuex store实例。useStore函数是一个Vue Composition API函数，它能够在组件中采用。

使用`useStore`函数的步骤如下：

1. 在组件中导入`useStore`函数和`createStore`函数。

import { useStore, createStore } from 'vuex'

2. 创建一个Vuex store实例。

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

3. 在组件中使用`useStore`函数来获取Vuex store实例。

export default {
  setup() {
    const store = useStore()
    return {
      store
    }
  }
}


4. 在组件中使用Vuex store实例。

<template>
  <div>
    <p>Count: {{ store.state.count }}</p>
    <button @click="store.commit('increment')">Increment</button>
  </div>
</template>

<script>
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    return {
      store
    }
  }
}
</script>

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

1、在Vue.js中，useRoute和useRouter是Vue Router提供的两个钩子函数，用来在组件中访问路由信息和路由实例。

2、useRoute相当于是vue2中的this.$route

import { useRoute } from 'vue-router'
export default {
setup() {
 const route = useRoute()
 console.log(route.path) // 当前路由路径
 return {
   route
 }
}
}

3、useRouter相当于是vue2中的this.$router，能够采用useRouter进行路由跳转

import { useRouter } from 'vue-router'
export default {
setup() {
 const router = useRouter()
 console.log(router.currentRoute.value.path) // 当前路由路径

 return {
   router
 }
}
}

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、异步采用：

import { nextTick } from 'vue'
//异步使用
setup() {
 const message = ref('Hello!')
 const changeMessage = async newMessage => {
   message.value = newMessage
   await nextTick()
   console.log('Now DOM is updated')
 }
}
//基本使用
nextTick(()=>{
  ...
})

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源码给删掉，这样的话，更加便于维护。

总结

到此这篇关于VUE3常用面试题总结的文章就介绍到这了,更多相关VUE3常用面试题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多兼容脚本之家！