2022 前端面试小结

指尖的记忆
252 阅读10分钟

Vue 组件 data 为什么必须是个函数而 vue 的根实例则没有此限制？

Vue 组件可能存在多个实例，如果使用对象形式定义 data，则会导致它们共用一个 data 对象，那么状态变更将会影响所有组件实例，这是不合理的;采用函数形式定义，在 initData 时会将其作为工厂函数返回全新 data 对象，有效规避多实例之间状态污染问题。而在 Vue 根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。

V-if 和 v-for 哪个优先级比较高？如果两个同时出现，应该怎么优化得到更好的性能呢？

  1. 显然 v-for 优先于 v-if 被解析;

  2. 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不 可避免，浪费了性能;

  3. 要避免出现这种情况，则在外层嵌套 template，在这一层进行 v-if 判断， 然后在内部进行 v-for 循环。

你知道 vue 中的 key 的作用和工作原理吗？说说你对它的理解。

  1. key 的作用主要是为了高效的更新虚拟 DOM，其原理是 vue 在 patch 过程中通过 key 可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个 patch 过程更加高效，减少 DOM 操作量，提高性能;

  2. 另外，若不设置 key 还可能在列表更新时引发一些隐蔽的 bug;

  3. vue 中在使用相同标签名元素的过渡切换时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们，否则 vue 只会替换其内部属性而不会触发过渡效果。

你怎么理解 vue 中的 diff 算法？

  1. diff 算法是虚拟 DOM 技术的必然产物:通过新旧虚拟 DOM 作对比(即 diff)，将变化的地方更新在真实 DOM 上另外，也需要 diff 高效的执行对比过程，从而降低时间复杂度为 O(n)；

  2. vue2.x 中为了降低 Watcher 粒度，每个组件只有一个 Watcher 与之对应，只有引入 diff 才能精确找到发生变化的地方；

Vue 组件 data 为什么必须是个函数而 vue 的根实例则没有此限制？

Vue 组件可能存在多个实例，如果使用对象形式定义 data，则会导致它们共用一个 data 对象，那么状态变更将会影响所有组件实例，这是不合理的;采用函数形式定义，在 initData 时会将其作为工厂函数返回全新 data 对象，有效规避多实例之间状态污染问题。而在 Vue 根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。

V-if 和 v-for 哪个优先级比较高？如果两个同时出现，应该怎么优化得到更好的性能呢？

  1. 显然 v-for 优先于 v-if 被解析;
  2. 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不 可避免，浪费了性能;
  3. 要避免出现这种情况，则在外层嵌套 template，在这一层进行 v-if 判断， 然后在内部进行 v-for 循环。

你知道 vue 中的 key 的作用和工作原理吗？说说你对它的理解。

  1. key 的作用主要是为了高效的更新虚拟 DOM，其原理是 vue 在 patch 过程中通过 key 可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个 patch 过程更加高效，减少 DOM 操作量，提高性能;
  2. 另外，若不设置 key 还可能在列表更新时引发一些隐蔽的 bug;
  3. vue 中在使用相同标签名元素的过渡切换时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们，否则 vue 只会替换其内部属性而不会触发过渡效果。

你怎么理解 vue 中的 diff 算法？

  1. diff 算法是虚拟 DOM 技术的必然产物:通过新旧虚拟 DOM 作对比(即 diff)，将变化的地方更新在真实 DOM 上另外，也需要 diff 高效的执行对比过程，从而降低时间复杂度为 O(n)；
  2. vue2.x 中为了降低 Watcher 粒度，每个组件只有一个 Watcher 与之对应，只有引入 diff 才能精确找到发生变化的地方；
  3. vue 中 diff 执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果 oldVnode 和新的渲染结果 newVnode，此过程称为 patch；
  4. diff 过程整体遵循深度优先、同层比较的策略;两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同操作;比较两组子节点是算法的重点，首先假设头尾节点可能相同做 4 次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点;借助 key 通常可以非常精确找到相同节点，因此整个 patch 过程非常高效。

谈一谈对 vue 组件化的理解？

  1. 组件是独立和可复用的代码组织单元。组件系统是Vue核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用；
  2. 组件化开发能大幅提高应用开发效率、测试性、复用性等；
  3. 组件使用按分类有:页面组件、业务组件、通用组件；
  4. vue 的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，它们基于VueComponent，扩展于Vue;
  5. vue 中常见组件化技术有:属性prop，自定义事件，插槽等，它们主要用于组件通信、扩展等；
  6. 合理的划分组件，有助于提升应用性能；
  7. 组件应该是高内聚、低耦合的;
  8. 遵循单向数据流的原则。

谈一谈对 vue 设计原则的理解

在 vue 的官网上写着大大的定义和特点:渐进式JavaScript框架、易用、灵活和高效;

渐进式 JavaScript 框架

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，Vue 的核心库只关注视图层，不仅易干上手还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

易用性

vue 提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应用的核心业务即可，只要会写 js、html 和 css 就能轻松编写 vue 应用。

灵活性

渐进式框架的最大优点就是灵活性，如果应用足够小，我们可能仅需要 vue 核心特性即可完成功能;随着应用规模不断扩大，我们才可能逐渐引入路由、状态管理、vue-cli 等库和工具，不管是应用体积还是学习难度都是一个逐渐增加的平和曲线。

高效性

超快的虚拟 DOM 和 diff 算法使我们的应用拥有最佳的性能表现。 追求高效的过程还在继续，vue3 中引入 Proxy 对数据响应式改进以及编译器中对于静态内容编译的改进都会让 vue 更加高效。

谈谈对 mvc、mvp、mvvm 的理解

这三者都是框架模式，它们设计的目标都是为了解决 Model 和 View 的耦合问题。

MVC 模式出现较早主要应用在后端，如 SpringMVC、ASP.NETMVC 等，在前端领域的早期也有应用，如 Backbone.js。它的优点是分层清晰，缺点是数据流混乱，灵活性带来的维护性问题。

MVP 模式在是 MVC 的进化形式，Presenter 作为中间层负责 MV 通信，解决了两者耦合问题，但 P 层过干臃肿会导致维护问题。

MVVM 模式在前端领域有广泛应用，它不仅解决 MV 耦合问题，还同时解决了维护两者映射关系的大量繁杂代码和 DOM 操作代码，在提高开发效率、可读性同时还保持了优越的性能表现。

你了解哪些 vue 性能优化方法？

  1. 路由懒加载;
  2. Keep-alive 缓存页面;
  3. 使用 v-show 复用 dom;
  4. V-for 遍历避免同时使用 v-if;
  5. 长列表性能优化;
  • 如果列表是纯数据展示，不会有任何改变，就不需要做响应化（object.freeze()）;
  • 如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容(vue-virtual-scroller、vue-virtual-scroll-list)。
  1. 事件销毁;
  2. 图片懒加载（v-lazy）;
  3. 第三方插件按需引入;
  4. 无状态的组件标记为函数式组件;
  5. 子组件分割;
  6. ssr等等。

你对 vue3 的新特性有没有了解？

  • 更快

    • 虚拟 DOM 重写
    • 优化 slots 的生成
    • 静态树提升
    • 静态属性提升
    • 基于 Proxy 的响应式系统

  • 更小:通过摇树优化核心库体积

  • 更容易维护:TypeScript+模块化

  • 更加友好

    • 跨平台:编译器核心和运行时核心与平台无关，使得 Vue 更容易与任何平台(Web、Android、iOS)一起使用

  • 更容易使用

    • 改进的 TypeScript 支持，编辑器能提供强有力的类型检查和错误及警告

  • 更好的调试支持

  • 独立的响应化模块

  • Composition API

虚拟 DOM 重写

期待更多的编译时提示来减少运行时开销，使用更有效的代码来创建虚拟节点。

组件快速路径+单个调用+子节点类型检测;

跳过不必要的条件分支;

JS 引擎更容易优化。

优化 solts 生成

Vue3 中可以单独重新渲染父级和子级;

确保实例正确的跟踪依赖关系;

避免不必要的父子组件的重新渲染。

静态树提升(Static Tree Hoisting)

使用静态树提升，这意味着 Vue3 的编译器将能够检测到什么是静态的，然后将其提升，从而降低了渲染成本;

跳过修补整棵树，从而降低渲染成本;

即使多次出现也能正常工作。

静态属性提升

使用静态属性提升，vue3 打补丁时候将跳过这些属性不会改变的节点;

基于 proxy 的数据响应式

Vue 2 的响应式系统使用 Object.defineProperty 的 getter 和 setter。Vue3 将使用 ES2015 Proxy 作为其观察机制，这将会带来如下变化:

组件实例初始化的速度提高 100%;

使用 Proxy 节省以前一半的内存开销，加快速度，但是存在低浏览器版本的不兼容;

为了继续支持 IE11，Vue3 将发布一个支持旧观察者机制和新 Proxy 版本的构建。

高可维护性

Vue3 将带来更可维护的源代码，不仅会使用 TypeScript，而且许多被解耦，更加模块化。

avatar
文章
阅读
粉丝