vue.js技术分享（一）

参考尤雨溪的技术分享

一、与其他框架的比较

Vue是一个“渐进式框架”（The Progressive Framework）

对比Angular

• 更灵活的适用场景

  1、默认API适合纯前端背景的开发者/小块灵场景
  2、配合TypeScript也可以适合传统Java后端背景的开发者/大型项目
• 更低的培训成本，更快的上手速度
• 底层的Virtual DOM在高级场景下提供更多的灵活性
• 大型应用中与TypeScript的整个不如Angular，但是在vue3.0会针对性的增强

对比React

• 对大部分常见场景都提供了事实标准方案

  1、不需要额外自行调研选取方案
  2、在必要的情况下也可以换用自研方案

• 模板提供更有好的学习曲线

  同事暴露底层Virtual DOM 用于高级场景（也支持JSX）

• 大型应用中与TypeScript的整个暂时不如React，3.0会针对增强，尤其是TSX

• 对标React 16+

  1、Vue同样可以实现类似于Hooks的逻辑复用机制
  2、3.0支持时间分片

与其他所有框架的区别

• 自带的响应式系统（Reactivity System）

  1、类似于MobX，但与框架本身的整合更无缝
  2、在复杂组件树中提供比 React 更精确的更新侦测
  3、3.0将暴露更多底层响应式API

• 单文件组件（Single File Components）

  1、HTML的自然延伸，符合直觉的代码组织方式
  2、完善的工具链
  * 预处理支持
  * Scoped CSS
  * webpack热更新
  * IDE支持（VSCode + Vetur）
  * Linter支持（eslint-plugin-vue）

二、官方工具链

● 路由：vue-router
● 状态管理：vuex
● 构建工具脚手架：vue-cli
● 开发者工具：vue-devtools
● IDE 支持：VSCode + Vetur
● 静态检查：ESLint + eslint-plugin-vue
● 单元测试：Jest + vue-jest + vue-test-utils
● 文档/静态站生成：VuePress

三、优秀的组件库

● Vuetify
○ 基于 Material Design，功能完整强大，桌面 + 移动
○ 支持 SSR
● Element-UI
○ 知名国产组件库，来自饿了么前端团队
○ 只支持桌面端应用
○ 有现成的控制后台模版
● iView
○ 另一个知名国产库，来自 TalkingData 前端团队
○ 主要支持桌面端，但也有小程序整合
○ 有现成的控制后台模版
● Quasar
○ 不仅仅是组件库的全平台解决方案
○ 桌面端 SPA/SSR + 移动端 PWA / Hybrid + 桌面端 Electron。

四、移动端方案

（H5 / Hybrid)

● Vant
○ 来自有赞的纯移动端 web 组件库
● Vux
○ 基于微信 UI 风格的移动端 web 组件库
● Onsen UI
○ 来自日本，基于 custom elements 支持多个上层框架的 hybrid 移动端方案
● Ionic 4
○ 知名 hybrid 移动端方案，原本只支持 Angular，4.0 开始通过原生 custom elements 支持 Vue
（目前 beta）

（Native)

● Weex
○ 来自阿里，现为 Apache 基金会项目
○ 在阿里内部广泛使用，经受过考验
○ 有一定的国内社区
● NativeScript
○ 原本只支持 Angular，但现在大力投入与 Vue 的整合
○ 完善的文档和活跃的国外社区，但大多为英文
○ 作为产品，背后有商业投入，提供商业支持
● Uni-app
○ 国产的 Vue 跨端方案，来自 DCloud
○ 同一套代码编译到 iOS, Android, H5 + 多种小程序