vue3面试题：公司真实vue3面试题整理

编辑排版 | 宋大狮

平台运营 | 小唐狮

一、说一下Vue3的新特性？

    1、新增组合API

        常用的有setup、reactive、ref、toRefs

    2、生命周期变化

        创建：

            beforeCreate和created被setup替代了

        挂载：

            onBeforeMount

            onMounted

        更新：

            onBeforeUpdate

            onUpdated

        销毁：

            onBeforeUnmount

            onUnmounted

    3、响应式原理变化

        用Proxy代理配合Reflect反射代替了v2中的Object.defineProperty()实现数据的响应式

    4、更好的支持TS

        因为源码用TS写的

    5、新增内置组件

        Fragment(片段)、Teleport(瞬移)、Suspense(不确定)

    6、新的脚手架工具vite

    7、可以设置多个根节点

    8、重写虚拟DOM的实现和Tree-Shaking，渲染速度更快、打包体积更小

    9、移除了一些东西

        移除v-on的键盘修饰符

        移除过滤器filter

二、说一下reactive和ref的区别？

    ref：

        通过Object.defineProperty()给value的属性添加getter、setter来实现响应式

        一般用来处理基本数据类型，也能处理复杂数据类型，只不过内部会自动将对象转换为reactive的代理对象

        在js中要加.value，在模版中不需要

    reactive：

        通过Proxy对目标对象中的所有属性动态地进行数据劫持，并通过Reflect操作对象内部数据来实现响应式

        一般用来处理复杂数据类型，会实现递归深度响应式

三、说一下Vue3的响应式原理？

    vue3采用数据代理+数据劫持+发布订阅模式的方法。

    在初始化vue实例时，通过Proxy进行数据代理，用Proxy对象来代理目标对象,

    并且对目标对象中的所有属性动态地进行数据劫持，动态地指定一个getter、setter，并通过Reflect操作对象内部数据。

    当Proxy对象属性或Proxy数组元素发生变化时，会触发Proxy属性的setter方法，然后通过Reflect操作目标对象属性，同时触发它Dep实例的notify方法进行依赖分发，通知所有依赖的Watcher实例执行内部回调函数。

    最后会触发renderWatcher回调，会重新执行render函数，重新对比新旧虚拟DOM，重新渲染页面。

    当读取Proxy对象属性时，会触发Proxy属性的getter方法，然后触发它Dep实例的depend方法进行依赖收集。

    

四、说一下组合式API写法对比选项式API写法的优点？

    组合式API写法将组件的逻辑按照功能进行划分，将相关逻辑放在一起，使得代码更加清晰和易于维护

五、说一下常用的一些组合API及作用？

    ref：定义一个基础数据类型的响应式数据

    reactive：定义一个复杂数据类型的响应式数据

    toRefs：把响应式数据对象中的所有属性变成ref对象，常用于解构响应式对象属性

    

    computed：计算属性

    watch：变化时监听

    watchEffect：立即监听

- END -