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

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

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

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

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

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

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

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

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

对

错

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

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

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

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

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

h('div', {}, slots)

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

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

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

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

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

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

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

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

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

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