VUE高级技能认证测试

应按功能领域(domain)划分目录,而非按技术类型划分

共享组件应放在src/components/common目录下,按业务领域划分的组件放在各自领域目录

所有Vuex/Vuex模块都应放在单个store.js文件中便于管理

应采用按功能模块(feature-based)的组织方式,每个模块包含自己的views、components、api、store

在router.beforeEach中获取用户权限,动态调用router.addRoutes添加路由

所有路由在初始化时全部注册,通过v-if在组件层面控制显示

应将路由配置与权限配置分离,路由meta中定义requiredRoles字段

动态添加路由后,需要使用router.replace({ path: to.path })触发重新导航

对

错

使用CDN外部化引入Vue、VueRouter等大型依赖库

启用gzip或brotli压缩静态资源

配置webpack的splitChunks策略,提取公共代码为独立chunk

将所有图片资源转换为base64编码内联到JS文件中

使用CSS自定义属性(CSS变量),通过JavaScript切换HTML根元素的class或data-theme属性

为每种主题编写独立的CSS文件,切换时动态加载对应CSS文件

使用CSS-in-JS方案(如styled-components),在JS中动态生成主题样式

使用Sass/Less变量,在编译时生成多套CSS,运行时通过class切换

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属性限制缓存数量

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

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

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

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

词法分析 → 语法分析 → 代码生成

parse(解析生成AST) → optimize(标记静态节点优化) → generate(生成渲染函数)

编译 → 链接 → 执行

模板解析 → 依赖收集 → 虚拟DOM更新

v-if在编译时会转换为条件渲染函数,不满足条件时不生成对应VNode

v-for会生成数组map函数,遍历数据生成多个VNode

v-show在编译阶段与v-if处理方式相同,都是条件渲染

v-if和v-for同时使用时,v-for优先级高于v-if

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

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

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

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

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

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

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

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

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

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

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

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

VNode.isStatic

VNode.isStaticRoot

VNode.static

VNode.isStaticNode

组件实例化时首先执行beforeCreate钩子,然后初始化props、data、methods等

created钩子执行时,组件已完成数据观测但还未挂载DOM

mounted钩子执行时,组件el已被真实DOM替换,可访问$el

Vue.use()注册的全局组件在任意组件实例化前就已可用

Vue 3采用最长递增子序列(LIS)算法优化子节点diff,减少了不必要的DOM移动

Vue 3取消了key的使用,完全依赖节点类型和props进行匹配

Vue 3的diff算法时间复杂度从O(n)降低为O(1)

Vue 3在patch阶段仍然采用与Vue 2完全相同的双端对比策略