vue 模拟试卷

框架内置API底层实现专题测试

8 题 50 分钟难度：★★★

Vue.set/Vue.delete 底层实现
响应式依赖收集与触发机制
内置组件（keep-alive、teleport 等）源码
Vue 全局 API 设计与实现
工具函数（nextTick 等）底层原理

试卷习题（8 题）

参考答案在文末

判断题

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

对

错

单选题

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

Vue的事件系统(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实例,通过其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中,子组件向父组件传递事件的标准方式是使用函数,该函数第一个参数是事件名称,后续参数是要传递的数据。父组件监听事件时,可以使用修饰符来验证事件参数是否符合预期。

参考答案

1.正确 2.B 3.D 4.A 5.B 6.A;B;D 7.A;D 8.$emit; emits选项验证

想在手机上在线作答这套卷子？

使用微信 卷王开发者小程序/App，首页顶部扫一扫识别二维码，即可限时作答并自动判分。

了解产品 App