精选vue3高频面试题

1、vue3有了解过吗？能说说跟vue2的区别吗？

⑴. 速度更快

• vue3相比vue2
• 重写了虚拟Dom实现
• 编译模板的优化
• 更高效的组件初始化
• undate性能提高1.3~2倍
• SSR速度提高了2~3倍

⑵. 体积更小

• 通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的
• 能够tree-shaking，有两大好处：
• 对开发人员，能够对vue实现更多其他的功能，而不必担忧整体体积过大
• 对使用者，打包出来的包体积变小了
• vue可以开发出更多其他的功能，而不必担忧vue打包出来的整体体积过多

⑶. 更易维护

• 组合 Api
• 可与现有的Options API一起使用
• 灵活的逻辑组合与复用
• Vue3模块可以和其他框架搭配使用
• 更好的Typescript支持
• VUE3是基于typescipt编写的，可以享受到自动的类型定义提示
• 编译器重写

⑷. 更接近原生

• 可以自定义渲染 API

⑸. 更易使用

• 响应式 Api 暴露出来
• 轻松识别组件重新渲染原因

2、Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？

1. 开始之前

Composition API 可以说是Vue3的最大特点，那么为什么要推出Composition Api，解决了什么问题？

通常使用Vue2开发的项目，普遍会存在以下问题：

• 代码的可读性随着组件变大而变差
• 每一种代码复用的方式，都存在缺点
• TypeScript支持有限
• 以上通过使用Composition Api都能迎刃而解

2. Options Api（选项API）

• Options API，即大家常说的选项API，即以vue为后缀的文件，通过定义methods，computed，watch，data等属性与方法，共同处理页面逻辑

3. Composition Api（组合API）

• 在 Vue3 Composition API 中，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）
• 即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API

3、说说Vue 3.0中Treeshaking特性？举例说明一下？

1. 是什么

Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination

简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码

在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到

而Vue3源码引入tree shaking特性，将全局 API 进行分块。如果您不使用其某些功能，它们将不会包含在您的基础包中

2. 如何做

Tree shaking是基于ES6模板语法（import与exports），主要是借助ES6模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量

Tree shaking无非就是做了两件事：

• 编译阶段利用ES6 Module判断哪些模块已经加载
• 判断那些模块和变量未被使用或者引用，进而删除对应代码

3. 作用

通过Tree shaking，Vue3给我们带来的好处是：

• 减少程序体积（更小）
• 减少程序执行时间（更快）
• 便于将来对程序架构进行优化（更友好）

4、Vue3中的生命周期

1. setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
2. onBeforeMount() : 组件挂载到节点上之前执行的函数；
3. onMounted() : 组件挂载完成后执行的函数；
4. onBeforeUpdate(): 组件更新之前执行的函数；
5. onUpdated(): 组件更新完成之后执行的函数；
6. onBeforeUnmount(): 组件卸载之前执行的函数；
7. onUnmounted(): 组件卸载完成后执行的函数；
8. onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；
9. onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；
10. onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

5、如何理解ref toRef和toRefs？

1. ref

1. 生成简单数据类型的响应式数据

2. 可用于模板和reactive

3. 通过.value修改值

2. toRef

1. 针对一个响应式对象（reactive封装）的prop

2. 创建一个ref，具有响应式

3. 两者保持引用关系

3. toRefs，避免模板中导出都是state

1. 将响应式对象（reactive封装）转换成普通对象

2. 对象的每个prop都是对应的ref

3. 两者保持引用关系

4. 最佳使用方式

1. 用reactive做对象的响应式，用ref做值类型的响应式

2. setup中返回toRefs(state)，或者toRef(state, 'prop')

3. ref的变量命名都用xxxRef

4. 合成函数返回响应式对象时，用toRefs

6、watch和watchEffect的区别是什么？

1. 二者都可以监听属性变化

2. watch需要明确监听哪个属性

3. watchEffect会根据其中的属性，自动监听其变化

7、Object.defineProperty 和 Proxy 的区别？

1.Proxy 可以直接监听对象而非属性；

2.Proxy 可以直接监听数组的变化；

3.Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的

4.Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty 只能遍历对象属性直接修改

5.Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利

6.Object.defineProperty 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写

8、怎么在 watch 监听开始之后立即被调用？

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调

9、Vue.js 3.0 响应式系统的实现原理？

1. reactive

• 设置对象为响应式对象。接收一个参数，判断这参数是否是对象。不是对象则直接返回这个参数，不做响应式处理。
• 创建拦截器handerler，设置get/set/deleteproperty。

get

收集依赖（track）；

如果当前 key 的值是对象，则为当前 key 的对象创建拦截器 handler, 设置 get/set/deleteProperty；

如果当前的 key 的值不是对象，则返回当前 key 的值。

set

设置的新值和老值不相等时，更新为新值，并触发更新（trigger）。

deleteProperty

当前对象有这个 key 的时候，删除这个 key 并触发更新（trigger）。

2. effect

接收一个函数作为参数。作用是：访问响应式对象属性时去收集依赖

3. track

接收两个参数：target 和 key

－如果没有 activeEffect，则说明没有创建 effect 依赖

－如果有 activeEffect，则去判断 WeakMap 集合中是否有 target 属性

－WeakMap 集合中没有 target 属性，则 set(target, (depsMap = new Map()))

－WeakMap 集合中有 target 属性，则判断 target 属性的 map 值的 depsMap 中是否有 key 属性

－depsMap 中没有 key 属性，则 set(key, (dep = new Set()))

－depsMap 中有 key 属性，则添加这个 activeEffect

４.trigger

判断 WeakMap 中是否有 target 属性，WeakMap 中有 target 属性，则判断 target 属性的 map 值中是否有 key 属性，有的话循环触发收集的 effect()。

10、v-for和key，v-bind，v-for中ref,v-for和v-if优先级,全局API

v-for和key

在Vue2.x中，我们都知道v-for每次循环都需要给每个子节点一个唯一的key，还不能绑定在template标签上

在Vue3中，key值应该被放置在template标签上，这样我们就不用为每个子节点设一遍：

v-bind

在vue2.x中，如果一个元素同时定义了v-bind="object"和一个相同的单独的属性，那么这个单独的属性会覆盖object中的绑定：

然而在vue3中，如果一个元素同时定义了v-bind="object"和一个相同的单独的属性，那么声明绑定的顺序决定了最后的结果（后者覆盖前者）

v-for中ref

vue2.x中，在v-for上使用ref属性，通过this.$refs会得到一个数组：

vue3不再自动创建数组，而是将ref的处理方式变为了函数，该函数默认传入该节点：

v-for和v-if优先级

在vue2.x中，在一个元素上同时使用v-for和v-if，v-for有更高的优先级，因此在vue2.x中做性能优化，有一个重要的点就是v-for和v-if不能放在同一个元素上。

而在vue3中，v-if比v-for有更高的优先级。因此下面的代码，在vue2.x中能正常运行，但是在vue3中v-if生效时并没有item变量，因此会报错：