运行时渲染和核心机制专题

专题说明

本专题综合探讨Vue运行时渲染的完整机制，包括渲染流程、调度器、响应式与渲染的联动等综合性内容。

建议先阅读配套完整指南，综合理解渲染机制后再开始答题。

📝 配套习题（6 题）

💡 参考答案在文末

判断题

在Vue中,被KeepAlive缓存的组件在重新激活时,由于其内部数据在初始化时已经完成了依赖收集,所以不会重新触发getter中的依赖收集过程。(判断对错)

对

错

单选题

关于Vue 2响应式系统的底层实现,以下说法错误的是?

Vue通过Object.defineProperty将data对象的所有属性转换为getter/setter

每个组件实例对应一个Watcher,在getter中收集依赖,在setter中触发更新

对象新增属性或数组索引赋值会自动触发响应式更新

Vue无法检测到对象属性的添加或删除,需要使用Vue.set或this.$set

多选题

关于Vue自定义指令(directive)的底层实现和生命周期钩子,以下哪些说法是正确的?

bind钩子在指令第一次绑定到元素时调用,只会调用一次

inserted钩子在被绑定元素插入父节点时调用,此时可以访问父节点

update钩子在组件VNode更新前调用,无论绑定值是否变化

componentUpdated钩子在组件VNode及其子VNode全部更新后调用

关于Vue中作用域插槽和KeepAlive缓存机制的组合使用,以下哪些说法是正确的?

KeepAlive缓存的是组件实例而非VNode,缓存的组件会保留其内部状态

作用域插槽的内容在KeepAlive缓存后不会重新渲染,但会保留子组件传递的数据

KeepAlive的include/exclude属性支持组件name进行匹配,不写name则无法匹配

被KeepAlive缓存的组件不会触发created/mounted钩子,但会触发activated钩子

当Vue中响应式数据发生变化时,从setter触发到DOM更新的完整流程中涉及哪些关键步骤?

setter调用dep.notify()通知所有Watcher

Watcher将更新函数推入异步更新队列

nextTick中执行patch(oldVNode, newVNode)进行diff比较

patch过程中根据diff结果调用DOM API更新真实DOM

在Vue中使用KeepAlive缓存包含作用域插槽的组件时,以下哪些行为会发生?

被缓存的组件再次激活时,作用域插槽会重新执行并获取最新的子组件数据

被缓存的组件会触发activated钩子,不会触发created钩子

作用域插槽的渲染函数会被缓存,即使子组件数据变化也不会重新渲染

KeepAlive缓存的是组件实例,包括其完整的作用域和插槽配置