Vue3的最新面试题

pengxiangfei666

已于 2024-12-17 16:42:41 修改

阅读量769

点赞数 20

文章标签： vue.js 前端 javascript

于 2024-11-19 17:06:28 首次发布

本文链接：https://blog.youkuaiyun.com/pengxiangfei666/article/details/143713964

版权

1、vue2和vue3响应式原理

vue2的响应式原理：

vue2的响应式原理是object.defineProperty方法对data中的属性进行劫持，当属性发生改变时，会触发对应的更新函数，从而更新视图。
vue2通过watcher来实现数据与视图的双向绑定，当数据发生变化时，watcher会通知对应的视图进行更新。
vue2的响应式原理存在一些缺陷，例如无法监听数组的变化，还有后续添加的对象属性，需要使用$set方法。

vue3的响应式原理

vue3使用了Proxy代替了object.defineProperty方法，Proxy可以监听到对象的所有属性，包括新增和删除操作
vue3使用了WeakMap来存储依赖关系，避免了vue2中Watcher的内存泄漏问题
vur3使用了多个根节点的组件，可以更方便地进行组件的复用和组合

2、Vue3带来了什么？有什么优化？

更快的渲染速度：Vue3使用了Proxy代理对象，可以更快的跟踪数据的变化，从而提高渲染速度。
更小的体积，vue3比vue2的体积更小，同时也支持按需加载，减少了页面的加载时间。
更好的ts支持，vue3对ts的支持更加完善，可以更好的进行类型检查和代码提示。
更好的组件封装，vue3引入了composition Api，可以更好的封装组件的逻辑，使组件更加可复用和容易维护。
更好的响应式：vue3进行了响应式重构，也就是proxy对象，可以更好的处理嵌套对象和数组的变化

3、为什么要选择组合式API？组合式API解决了什么问题？组合式API的优点？

因为选项式Api会把相关的片段代码给分开，不利于代码的维护。vue2对ts的支持有限，无法跨组件重用代码
组合式Api的优点是代码量变少，可以重用代码，非常灵活，工具语法提示友好，支持ts，更好的提高代码的可读性和类型检测，组件间代码可以复用

4、setup配置

setup接收两个参数，分别是props和context

props：值为一个对象，他是组件外部传入的，并且是在组件内部声明接收的属性。需要注意的是vue3的props是只读的，如果需要修改props需要重新赋值
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、什么是计算属性

computed函数，是用来定义计算属性的，计算属性不能修改，他是存在缓存里的，多次使用只调用一次。
计算属性可以依赖于多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行。
计算属性有两个方法，为set方法和get方法，可以在里面添加一些逻辑处理。

注意：

回调函数必须return，结果就是计算的结果

如果计算属性依赖的数据发生变化，那么会重新计算

不要在计算中中进行异步操作

7、watch与watchEffect

watch：

watch与watchEffect都是vue3的监听器，只是他们使用的方法有区别
watch的工作原理是侦听特定的数据源，并在回调函数里执行副作用，他默认是惰性的，只有在指定的数据源变化时才会触发回调，
可以在第三个参数的位置配置对象里配置immediate 为true让他立即执行一次，deep为true则为深层监听

watchEffect：

watchEffect可以不针对某一个单独的值去监听，他是你可以直接写逻辑，当出现在watchEffect函数里的变量会被收集监听，从而触发此监听，watchEffect的缺点是拿不到变化前的数据值。默认
immdiate 是 true，所以初始化时会立即执行。
onInvalidate 是一个参数，用于处理副作用的取消或清理操作。当在副作用函数中使用了某些资源（如定时器、订阅等），可能需要在副作用函数重新执行之前清理这些资源，以防止内存泄漏或其他问题。

8、provide与inject

provide和inject的作用就是从父节点直接注入进数据，让他的子孙组件都能通过inject拿到数据
使用方法是在父组件用引入provide，然后传入两个参数，第一个是键，第二个是值，在子组件里使用inject函数传入键取出值。

9.vue3新的生命周期钩子

执行最终顺序：

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函数？ Vue2时代Mixin的关系？ vue3自定义hooks和vue2中mixin的区别和比较？

自定义hook函数

以函数的形式抽离一些可以复用的方法像钩子一样挂着，随时可以引入和调用
将相同的逻辑、可复用的功能抽离为外部js文件，方便复用
函数名文件名通常以useXXX定义

Vue2时代Mixin
Mixin不足在 Vue 2 中，mixin 是将部分组件逻辑抽象成可重用块的主要工具。但是，他们有几个问题： 1、Mixin
很容易发生冲突：因为每个 mixin 的 property 都被合并到同一个组件中，所以为了避免 property
名冲突，你仍然需要了解其他每个特性。 2、可重用性是有限的：我们不能向 mixin
传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。