前端面试系列【009】 - 谈一下你对 vue 设计原则的理解

481 阅读3分钟

本文仅针对 vue 2.6.x。

这道题我们可以从官网入手:

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

上面的话有点官方,不太易懂,这里简单概括一下:

  • 定义:Vue 是一个渐进式 JavaScript 框架
  • 特点:易用、灵活和高效

那么我们接下来便可以围绕定义和特点来进行介绍。

定义

什么叫做渐进式呢?这里我们可以先来看一个图:

当我们使用 vue 进行开发的时候,只需要最核心的部分,即:

  • Delarative Rendering:声明式渲染
  • Component System:组件系统

就可以进行业务的开发了。

由于 Vue 的核心库只关注视图层,所以不仅易于上手,还便于和第三方库或者既有的项目进行整合。

同时,如果不满足于核心库,还可以与现代化的工具链以及各种支持类库相结合,比如:

  • Client-Side Routing:客户端路由,如 vue-router
  • Large Scale State Managment:大规模状态管理器,如 vuex
  • Build System:构建系统,如 vue-cli

Vue 也完全能够构建复杂的单页应用。

这就是所谓的渐进式了:仅仅需要核心库便可以开始工作,当需求逐渐复杂,渐进式的引起相关的类库即可满足需求。

特点

易用性

由于 Vue 是数据驱动的框架,所以我们只需要关注核心的业务逻辑即可,而不用再考虑视图的更新渲染。另外声名式模板语法和基于配置的组件系统可以让我们将注意力放在视图层,只需要会写 html、css 和 js 就能轻松的编写 vue 应用

灵活性

由于 vue 本身是渐进式的,而渐进式最大的特点就是灵活性。如果应用足够小,那么引入核心库即可正常工作,随着应用规模的逐渐扩大,才需要引入路由,状态管理等库和工具。这样不管是应用体积还是学习成本都会是一条平滑的曲线。

高效性

vue 的高效性主要体现在虚拟 DOM 和 diff 算法中:

  • diff 算法让数据发生改变的时候,尽量少的更新 DOM
  • 而每一个组件一个 Watcher 的管理让视图更新的粒度最小化

这些都极大的节约了视图更新的成本,从而提升了 vue 的高效性。

同时,vue3 中对于模板编译的优化和引入 Proxy 处理数据响应式更是大大提高了性能。

结语

更佳阅读体验:009 - 谈一下你对 vue 设计原则的理解