vue面试题十四

一、Vue 3的Composition API主要包括哪些函数和钩子？

Vue 3的Composition API主要包括以下几个方面的函数和钩子：

1. 响应式引用和状态

• ref：用于创建响应式引用，接收一个值并返回一个响应式且可变的ref对象。在模板中可以直接访问ref对象包裹的值，无需.value。
• reactive：用于创建响应式对象，返回一个响应式的代理对象（Proxy）。该对象可以包含多个响应式属性。

2. 生命周期钩子

• onBeforeMount：组件挂载到 DOM 之前调用。
• onMounted：组件挂载到 DOM 后调用。
• onBeforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
• onUpdated：组件 DOM 更新后调用。
• onBeforeUnmount：组件卸载之前调用。
• onUnmounted：组件卸载后调用。

3. 依赖注入

• provide：允许祖先组件向其所有子孙后代组件提供可用的属性。
• inject：允许一个子孙组件获取祖先组件中通过 provide/inject 提供的属性。

4. 逻辑复用

• setup：Composition API 的入口点，替代了 Vue 2.x 中的选项式 API。
• computed：与 Vue 2.x 类似，用于创建计算属性。
• watch：侦听特定的响应式数据，并在其变动时运行回调。
• watchEffect：立即运行一个函数，并响应式地追踪其依赖，并在其依赖变更时重新运行该函数。

5. 辅助函数

• toRefs：将响应式对象转换为普通对象，其中结果对象的每个属性都是指向原始对象相应属性的 ref。
• isRef：检查一个值是否为一个 ref 对象。
• isReactive：检查一个对象是否是由 reactive 创建的响应式代理。
• isReadonly：检查一个对象是否是由 readonly 创建的只读代理。

6. 模板引用

• ref（模板中使用）：在模板中用于创建对元素的引用。

7. 其他

• shallowRef 和 shallowReactive：用于创建浅层的响应式引用和对象。
• customRef：创建一个自定义的 ref，并对其依赖项进行追踪。

这些函数和钩子共同构成了Vue 3的Composition API，为开发者提供了更加灵活和可复用的代码组织方式。

二、请解释Vue 3的响应式系统是如何工作的？

Vue 3的响应式系统是基于ES6的Proxy对象和Reflect API实现的，其工作原理可以概括如下：

1. Proxy代理：

   • 当一个Vue组件被创建时，Vue会使用Proxy对象来创建一个响应式代理对象，这个代理对象会“包裹”组件的data对象。
   • Proxy对象允许Vue拦截并自定义data对象上任意属性的读取（get）和修改（set）。

2. 数据劫持：

   • Vue通过Proxy对象的getter和setter方法来实现对data对象属性的“劫持”。
   • 当组件的data对象中的某个属性被访问时，会触发Proxy对象的getter方法，Vue会在这里进行依赖收集。
   • 当组件的data对象中的某个属性被修改时，会触发Proxy对象的setter方法，Vue会在这里进行依赖通知和更新操作。

3. 依赖收集和触发：

   • 依赖收集是Vue响应式系统的核心机制之一。当组件的某个属性被访问时，Vue会记录下当前正在计算这个属性的所有依赖（例如计算属性、侦听器、渲染函数等）。
   • 当data对象的某个属性发生变化时，Vue会遍历这个属性的所有依赖，并通知它们进行更新。

4. 组件更新：

   • 当组件的data对象发生变化时，Vue会触发组件的重新渲染。在这个过程中，Vue会重新执行组件的渲染函数，生成新的虚拟DOM树。
   • 然后，Vue会对比新旧虚拟DOM树，找出需要更新的真实DOM节点，并只更新这些节点，从而实现高效的DOM更新。

5. 优化性能：

   • Vue 3的响应式系统通过Proxy和Reflect API的使用，使得数据的变化能够被更精确地追踪和响应，从而减少了不必要的计算和DOM更新。
   • 同时，Vue 3还通过优化Diff算法和虚拟DOM的实现，进一步提高了组件的渲染性能。

总结来说，Vue 3的响应式系统通过Proxy代理和依赖收集机制，实现了对组件数据变化的精确追踪和高效响应。这种机制使得Vue 3在性能上有了显著提升，同时也为开发者提供了更加灵活和强大的数据驱动视图的能力。