标签
note
字数
477 字
阅读时间
2 分钟
Vue 的进化历程
sea.js
库阶段（2014 年
设计重点
- 基于 es5 getter/setter 和 原生 js 对象的响应式系统
- MVVM / 模版数据绑定
- 像 jQuery 一样可以通过
<script>引用的简单库
特征
- 还不算是个框架
- 受 Backbon / Ractive 影响的 API：
- 响应式系统和组件实例有很强的耦合，影响逻辑复用（this.api)
- 直到 0.11 才引入 Mixins
- 还在摸索完善模版预发和作用域规则
原因：基于 DOM 的渲染机制
- 没有编译过程
- 模板直接实例化为 DOM 树
- 通过遍历 DOM 树实现数据绑定
- 类似现在的
petite-vue的实现
框架阶段（2015-2016
设计重点
- 稳定模板语法和作用域设计
- 确定了 v-bind、v-on 和对应简写的语法
- 第一次引入 v-for（取代了 v-repeat
- 将项目的涵盖范围扩大到 SPA 框架
- spa 路由
- 状态管理
- 工具链
- 热更新
- Scoped CSS
通用框架阶段（2016-3
2.X —— 全职
设计重点
- 第二次彻底重写，代码架构改进
- 引入将模板编译为 Virtual DOM 渲染函数的编译流程
- 基于 VDOM 的 SSR
- 基于 VDOM 的跨端渲染（Weex、NativeScript
- 和类型系统的结合
- 源码中使用 Flow
- 手动 TypeScript 类型定义
demo
vue-hackernews-2.0：webpack+sfc+vue router+vuex+ssr
编译/运行时混合阶段（2019-now
重构初期的重心
- 提高浏览器最低支持要求，使用现代 ES 语法和功能
- 全面提升性能
- 改善类型系统整合（flow -> ts
- 改善在大型应用中的可扩展性
参考
Vue.js 作者谈 Vue 的进化历程_哔哩哔哩_bilibili
贡献者
jiechen