回答源码面试题

29 阅读1分钟

Vue

我看过Vue 2的部分核心源码,主要关注了响应式系统、虚拟DOM和生命周期的实现原理。比如:

  • 响应式系统:通过Object.defineProperty劫持数据 getter/setter,当数据变化时通知Watcher更新视图;
  • 虚拟DOM:用JS对象模拟DOM结构,diff算法对比新旧节点,只更新变化的部分;
  • 生命周期:源码中通过callHook方法按顺序触发各阶段钩子(如beforeMountmounted),每个阶段对应不同的初始化逻辑。
    这些模块的设计思想让我对框架底层运作有了更清晰的理解,也帮助我在开发中更好地处理性能优化和异常问题。

Element

我看过Element的部分核心组件源码,比如Button、Table和Form。印象比较深的是:

  • 组件封装逻辑:每个组件基本遵循“props定义 + 事件分发 + 渲染函数”的结构,比如Button通过props控制typesize等属性,再用render函数生成对应的DOM结构;
  • 样式方案:通过Less变量和Mixin实现主题定制,比如src/theme/index.less中定义了颜色、间距等变量,组件样式直接引用这些变量,方便统一换肤;
  • 工具函数的复用:像src/utils/validate.js中的表单验证工具,src/mixins/element.js中的组件公共逻辑(如尺寸适配),这些复用设计让代码更简洁。
    通过看源码,我学到了组件库如何平衡灵活性和易用性,比如用slot实现内容分发,用provide/inject处理跨组件通信(如Form和FormItem的联动)。