框架内置API底层实现专题

专题说明

本专题深入探讨Vue框架内置API的底层实现原理，包括ref、reactive、computed、watch等核心API的实现机制。

建议先阅读配套完整指南，理解内置API的实现机制后再开始答题。

📝 配套习题（8 题）

💡 参考答案在文末

判断题

Vue 3中将Vue 2的全局API(如Vue.nextTick、Vue.set)改为从vue包中按需导入,这样做的主要目的是为了更好地支持Tree Shaking和避免全局污染。(判断对错)

对

错

单选题

关于Vue事件系统和nextTick的底层实现原理,以下说法正确的是?

Vue的事件系统($on/$emit/$off)基于DOM原生的CustomEvent实现

nextTick内部优先使用Promise.then实现微任务,降级到setTimeout

Vue组件间通信只能通过props和events,不能直接调用组件实例方法

nextTick回调会在下一个宏任务(macroTask)中执行

关于keep-alive组件的底层实现,以下说法错误的是?

keep-alive通过缓存组件实例来实现,缓存的实例不会重新执行created钩子

keep-alive内部维护一个cache对象和keys数组,用于记录缓存的组件

keep-alive只能缓存第一个子组件,多个子组件时只缓存第一个

keep-alive的exclude属性优先级低于include属性

在Vue 2中使用EventBus(事件总线)实现跨组件通信时,以下说法正确的是?

EventBus本质上是一个空的Vue实例,通过其$on/$emit方法实现事件通信

EventBus应作为全局变量挂载到Vue.prototype上,所有组件共享

使用EventBus监听事件后,组件销毁时无需手动移除监听器

Vue 3仍然推荐在组件外部创建Vue实例作为EventBus

在Vue 3中,关于nextTick的使用和实现,以下说法错误的是?

nextTick返回一个Promise,可以使用await语法等待DOM更新完成

nextTick的回调函数会在当前宏任务(macroTask)队列的末尾执行

修改响应式数据后,如果想立即访问更新后的DOM,应在nextTick中操作

Vue 3的nextTick可以从vue包中导入,不再需要通过Vue.nextTick调用

多选题

关于Vue中插槽(slot)和keep-alive的底层实现原理,以下哪些说法是正确的?

普通插槽在编译时会转换为渲染函数中的this.$slot调用

作用域插槽底层是通过将子组件数据作为参数传递给父组件的渲染函数

keep-alive的缓存是基于组件的name选项作为缓存key

keep-alive内部使用LRU缓存策略,可通过max属性限制缓存数量

在Vue 3的render函数中,如何使用h函数和插槽机制实现一个自定义容器组件,该组件接受插槽内容并在外层包裹div?

h('div', {}, slots.default())

h('div', {}, slots)

h('div', { default: () => 'content' })

h('div', {}, [slots.header(), slots.footer()])

填空题

在Vue 3中,子组件向父组件传递事件的标准方式是使用____________函数,该函数第一个参数是事件名称,后续参数是要传递的数据。父组件监听事件时,可以使用____________修饰符来验证事件参数是否符合预期。