Vue 2.0 发布啦!

原文:https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.cyoou0ivk

今天我们非常激动的首发 Vue 2.0 preview 版本,这个版本带来了很多激动人心的改进和新特性。我们来看看这里面都有些什么!


更轻,更快

Vue.js 始终聚焦在轻量和快速上面,而 2.0 把它做得更好。现在的渲染层基于一个轻量级的 virtual-DOM 实现,在大多数场景下初试化渲染速度和内存消耗都提升了 2~4 倍 (详见这里的 benchmarks)。从模板到 virtuel-DOM 的编译器和运行时是可以独立开来的,所以你可以将模板预编译并只通过 Vue 的运行时让你的应用工作起来,而这份运行时的代码 min+gzip 之后只有不到 12kb (提一下,React 15 在 min+gzip 之后的大小是 44kb)。编译器同样可以在浏览器中工作,也就是说你也可以写一段 script 标签然后开始你的工作,就像以前一样。而即便你把编译器加进去,build 出来的文件 min+gzip 之后也仅有 17kb,仍然小于目前的 1.0 版本。

不是普通的 Virtual-DOM

现在 virtual-DOM 有点让人听腻了,因为社区里有太多种实现,但是 Vue 2.0 的实现有与众不同的地方。和 Vue 的响应式系统结合在一起之后,它可以让你不必做任何事就获得完全优化的重渲染。由于每个组件都会在渲染时追踪其响应依赖,所以系统精确地知道应该何时重渲染、应该重渲染哪些组件。不需要 shouldComponentUpdate,也不需要 immutable 数据 - it just works.

除此之外,Vue 2.0 从模板到 virtuel-DOM 的编译阶段使用了一些高阶优化:

  1. 它会检测出静态的 class 名和 attributes 这样它们在初始化渲染之后就永远都不会再被比对。

  2. 它会检测出最大静态子树 (就是不需要动态性的子树) 并且从渲染函数中萃取出来。这样在每次重渲染的时候,它就会直接重用完全相同的 virtual nodes 同时跳过比对。

这些高阶优化通常只会在使用 JSX 时通过 Babel plugin 来做,但是 Vue 2.0 即使在使用浏览器内的编译器时也能做到。

新的渲染系统同时允许你通过简单的冻结数据来禁用响应式转换,配以手动的强制更新,这意味着你对于重渲染的流程实际上有着完全的控制权。

以上这些技术组合在一起,确保了 Vue 2.0 在每一个场景下都能够拥有高性能的表现,同时把开发者的负担和成本降到了最低。

Templates, JSX, or Hyperscript?

开发者对于用模板还是 JSX 有很多的争执。一方面,模板更接近 HTML - 它能更好地反映你的 app 的语义结构,并且易于思考视觉上的设计、布局和样式。另一方面,模板作为一个 DSL 也有它的局限性 - 相比之下 JSX/hyperscript 的程序本质使得它们具有图灵完备的表达能力。

作为一个兼顾设计和开发的人,我喜欢用模板来写大部分的界面,但在某些情况下我也希望能拥有 JSX/hyperscript 的灵活性。举例来说,当你想在一个组件中程序化的处理其子元素时,基于模板的 slot 机制会显得比较有局限性。

那么,为什么不能同时拥有它们呢?在 Vue 2.0 中,你可以继续使用熟悉的模板语法,但当你觉得受限制的时候,你也可以直接写底层的 virtual-DOM 代码,只需用一个 render 函数替换掉 template 选项。你甚至可以直接在你的模板里使用一个特殊的 <render> 标签来嵌入渲染函数!一个框架,两全其美。

流式服务端渲染

既然迁移到了 virtual-DOM,Vue 2.0 自然支持服务端渲染和客户端的 hydration(直接使用服务端渲染的 DOM 元素)。当前服务端渲染的实现有一个痛点,比如在 React 里,渲染是同步的,所以如果这个 app 比较复杂的话它会阻塞服务器的 event loop。同步的服务端渲染在优化不当的情况下甚至会对客户端获得内容的速度带来负面影响。Vue 2.0 提供了内建的流式服务端渲染 - 在渲染组件时返回一个可读的 stream,然后直接 pipe 到 HTTP response。流式渲染能够确保服务端的响应度,也能让用户更快地获得渲染内容。

解锁更多可能性

基于新的架构,我们还有更多的可能性有待开发 - 比如在手机端渲染到 native 界面。目前我们正在探索一个 Vue.js 2.0 的端,它会用 weex:一个由中国最大科技公司之一的阿里巴巴的工程师们维护的项目,作为一个 native 的渲染层。同时从技术角度 Vue 2.0 运行在 ReactNative 上也是可行的。让我们拭目以待!

兼容性以及接下来的计划

Vue.js 2.0 仍然处在 pre-alpha 阶段,但是你可以来这里 查看源代码。尽管 2.0 是一个完全重写的项目,但是除了一些有意废弃掉的功能,API 和 1.0 是大部分兼容的。看看 2.0 中一模一样的官方例子 - 你会发现几乎没有什么变化!

对于部分功能的废弃,本质上是为了提供更简洁的 API 从而提高开发者的效率。你可以移步这里 查看 1.0 和 2.0 的特性比对。如果你在现有的项目中大量地使用着一些被废弃的特性,这意味着会有一定的迁移成本,不过我们在未来会提供更详实的升级指导。

现在我们还有很多工作没有完成。一旦我们达到了令人满意的测试覆盖率,我们将会推出 alpha 版本,同时我们希望能在五月底六月初推出 beta 版。除了更多的测试之外,我们也需要更新相关库(如 vue-router, Vuex, vue-loader, vueify...)的支持。目前只有 Vuex 在 2.0 下可以直接使用,但是我们会确保在 2.0 正式发布时所有东西都会顺畅地工作。

我们不会因此而忘记 1.x 哦!1.1 将会和 2.0 beta 独立发布,提供六个月 critical bug fixes 和九个月安全升级的长效服务 (LTS)。同时 1.1 还会包含可选的废弃特性警告,让你为升级到 2.0 做好充足的准备。尽请期待!

39 条早期评论

  • 姓名
    小a
    评论日期
    2016/04/29 02:26:26
    又是一个轮子。。。明明有react了,不明白意义何在
  • 姓名
    囧克斯
    评论日期
    2016/04/29 05:53:14
    @小a

    这种问题就算是你提到的 React 出来的时候也有人这么说,Vue 有很多存在的意义都已经写在原文里了,希望你可以感受到
  • 姓名
    transtone
    评论日期
    2016/04/29 12:04:37
    明明中国已经人口爆满了,还允许生二胎,不明白意义何在。
  • 姓名
    Blue
    评论日期
    2016/07/15 05:25:29
    这个问题问的不是地方,哥们
  • 姓名
    meteorice
    评论日期
    2016/07/16 01:22:42
    明明有了这中语言为什么还要有别的语言?
  • 姓名
    cqk
    评论日期
    2016/09/22 05:33:00
    没有竞争,怎么发展
  • 姓名
    rambo
    评论日期
    2016/04/29 01:59:09
    2.0 真的把过滤器干掉了吗?
  • 姓名
    kazaff
    评论日期
    2016/05/02 11:45:53
    最近刚关注vue,之前ng和react都玩过,但我依然对vue很感兴趣,总之,持续关注更新进展。
  • 姓名
    gun
    评论日期
    2016/05/03 10:57:22
    持续关注ing
  • 姓名
    xiaobin
    评论日期
    2016/05/10 11:16:10
    一直关注着Vue的发展,现在要出vue2.0了,感觉vue1.X还没用多久呢,对于Weex,什么时候可以测试啊?上次提交申请后就没有消息了。
  • 姓名
    zen_yue
    评论日期
    2016/05/10 02:14:52
    终于向Native进发了
  • 姓名
    Beach
    评论日期
    2016/05/11 02:15:29
    学习了!
  • 姓名
    colee
    评论日期
    2016/05/13 02:15:01
    持续关注,广阔天地,大有作为。VUE比react和ng都更了解前端痛点,ng明显技术强大,但前端实战经验相比其它框架略显不足。react总体很强大,就是有点剑走边锋,走火入魔,离HTML+CSS+JS越走越远。
  • 姓名
    zgldh
    评论日期
    2016/05/15 07:23:01
    用过AngularJS和VueJS。感觉VueJS给开发人员的思维负担更小一点。
  • 姓名
    李超
    评论日期
    2016/05/24 10:18:43
    期待ing
  • 姓名
    bestsl
    评论日期
    2016/05/26 01:00:58
    了解vue有段时间了,还很浅薄,期待2.0正式推出的时候用。
    Vue只适合做单页应用吗,传统的多页网站,每个页面里嵌入一个Vue不是也可以
  • 姓名
    朱英达
    评论日期
    2016/07/20 11:24:13
    传统多页网站也可以用vue,你可以把它当做一个纯view层做渲染,然后自己实现controller和model层。因为他比ng和react都要轻,所以在重构一个传统的$体系的复杂web页面时,用vue来做逐步替换是不错的选择。
  • 姓名
    gor-c
    评论日期
    2016/07/01 01:32:17
    学习
  • 姓名
    JoeRay61
    评论日期
    2016/07/22 10:48:10
    勾股哥,2.0的教程出了吗?
  • 姓名
    exten
    评论日期
    2016/08/07 09:32:20
    我很支持国货,外国人的不一定是最好的。只是他们占领了定义权。Vue 我希望能一直维护下去,我担心的是这一点。
  • 姓名
    zyj
    评论日期
    2016/08/17 10:47:33
    vue 如何通过el绑定到多个元素上面
  • 姓名
    Lucifer
    评论日期
    2016/08/22 09:18:14
    个人感觉Vue的设计和使用非常优雅,从el这个属性就看出来了(这是个选择器)。这是真正从实用角度出发,而并非仅仅强调自己的标准。其他那些框架用起来都有点脱裤子放屁的感觉。
    当然如果绑定和展示可以同体,像这样value="{{xxx}}" ,那就更好了,污染会更少,让我们真正的把Validation这个功能用起来。
  • 姓名
    Jser
    评论日期
    2016/12/23 05:01:13
    你可以试试 https://www.npmjs.com/package/yox
  • 姓名
    FUCK
    评论日期
    2016/08/27 11:27:34
    用了虚拟dom,用了jsx,照着抄了react的这些东西,有意义吗?
  • 姓名
    Huangyingjie
    评论日期
    2016/08/30 03:22:59
    React仅仅是View层,太薄了;而Vue则封装了额外的功能,且比React的那套工具链轻便好用。
  • 姓名
    Farzer
    评论日期
    2016/09/07 09:56:45
    请问下什么时候会出2的稳定版本?
  • 姓名
    RYoui
    评论日期
    2016/09/13 11:47:05
    坐等正式版,在项目中使用过,表现还行。
  • 姓名
    lhy1149
    评论日期
    2016/09/17 12:28:54
    欣赏,希望不断的琢磨,用更优雅的方式解决问题,这才是匠心,估计只会在CXDN上抄代码段混饭吃的人是理解不了的
  • 姓名
    涂贤田
    评论日期
    2016/09/19 12:06:51
    vue是一个颠覆式的创新,前端编程的思维方式也要转变。我期望见到更多的vue示例项目,目前用vue开发还是很吃力。
  • 姓名
    Pluto
    评论日期
    2016/10/12 11:15:18
    期待Vue 2.0,用过Angular、Vue 1、React,感觉Vue的优势就是轻、快,还有就是对于初学者来说更友好
  • 姓名
    深蓝
    评论日期
    2016/10/17 04:29:17
    异步加载能考虑下requirejs这些吗?非常不想使用Webpack打包这样重的前端开发。
  • 姓名
    Jser
    评论日期
    2016/12/23 05:17:08
    你可以试试 https://www.npmjs.com/package/yox
  • 姓名
    zhaoxin
    评论日期
    2017/02/15 08:07:24
    就程序加载方式,你有很多选择,requireJS也是完全你自己可以用的,这个跟vue无关
  • 姓名
    kevin
    评论日期
    2016/10/22 09:01:06
    有2.0的文档地址吗
  • 姓名
    Mark Jing
    评论日期
    2016/10/22 11:15:51
    我就是来冒个泡!
  • 姓名
    snowfox
    评论日期
    2016/10/26 03:16:04
    你好,我想请教个问题,关于vue缓存机制的,我在使用vue+webpack进行开发的时候发现缓存机制只能通过在标签上加keep-alive来实现,但是这样做的话所有页面都会被缓存起来,我只希望对特定页面进行缓存,请问该怎么实现呢?
  • 姓名
    snowfox
    评论日期
    2016/10/26 03:22:03
    你好,我想请教个问题,关于vue缓存机制的,我在使用vue+webpack进行开发的时候发现缓存机制只能通过在《router-view》标签上加keep-alive来实现,但是这样做的话所有页面都会被缓存起来,我只希望对特定页面进行缓存,请问该怎么实现呢?
  • 姓名
    snowfox
    评论日期
    2016/10/29 02:55:32
    今天看了vue1.0的源码发现源码上面只使用了一个全局变量keepAlive来保存当前组件的是否进入缓存,就是说源码上面就不支持对单页面进行缓存,就是说要不就是所有页面都进行缓存要不就都不进行(子组件例外),所以我只好在源码的bind和build里面添加了几句话增加了单页面缓存功能,希望勾股哥在2.0能完善单页面缓存功能。
  • 姓名
    profk
    评论日期
    2016/11/14 11:00:58
    问下,vue在使用jsx的情况下,怎么添加事件绑定。。