Vue3Vue3——组合式APIvue3 面试题不要告诉别人，

组合式API 组合式api（Composition API）算是vue3对我们开发者来说非常有价值的一个api更新，我们先不关注具体语法，先对它有一个大的感知1. composition vs options options API开发出来的vue应用如左图所示，它的特点是理解容易，因为各个选项都有固定的书写位置，比如响应式数据就写到data选择中，操作方法就写到methods配置项中等，应用大了之后，相信大家都遇到过来回上下找代码的困境 composition API开发的vue应用如右图所示，它的特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法等放到一起，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便，设置如果功能复杂，代码量大，我们还可以进行逻辑拆分处理特别注意：选项式api和组合式api俩种风格是并存的关系并不是非此即彼需要大量的逻辑组合的场景，可以使用compition API进行增强

2生命周期钩子函数选项 API 生命周期选项和组合式 API 之间的映射beforeCreate -> use setup()created -> use setup()beforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdatedbeforeUnmount -> onBeforeUnmountunmounted -> onUnmounted（destroyed => unmounted）errorCaptured -> onErrorCapturedrenderTracked -> onRenderTracked (render函数调用触发调用，包含首次触发)renderTriggered -> onRenderTriggered (render函数调用触发调用，不包含首次触发)

3三个响应式函数简述：reactive-ref-toRefs

reactive：对target进行代理，属性的下一层在获取get时再代理处理；接收一个参数，判断是否为对象创建proxy对象handler，设置get、set、deleteProperty；get时调用track收集依赖，set时调用trigger触发依赖；返回proxy对象ref：可把基本类型数据转为响应式对象；const count = ref(0)//返回一个对象，{value:0}参数为基本类型值的话，内部会创建一个只有value属性的对象，改对象value属性具有getter（收集依赖）和setter（触发更新）参数为对象，内部调用reactive；

toRefs：将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref。代理对象被解构的时候，相当于定义对应key值变量来接收对象的key值；而基本类型赋值，就是在内存中再复制一份，所以此处被解构的x\y是两个基本变量，与代理对象无关；内部创建一个新的对象遍历传入的代理对象的所有属性，值都转为响应式对象;挂载到新的对象上，然后返回新的对象

4 Proxy、Reflect使用 Reflect，反射，用来获取或设置对象中的成员；如果Reflect和Object有相同方法，建议使用Reflect； Proxy第二个参数对象中set、deleteProperty中需返回布尔类型的值，严格模式下，如果不返回值，默认返回undefined即false会出现Type Error异常； Proxy和Reflect的receiver参数 Proxy中的receiver：Proxy或者继承Proxy的对象 Reflect中的receiver：如果target对象中设置了getter，getter中的this指向receivervue3中receiver都会传递，为保证this获取值正确；

部分内容来源于网络如有侵权请联系作者删除