Vue.js 1.0.0 发布了!

作为“打入敌人内部”的第一件事,转载一下 Vue.js 1.0.0 新世纪福音战士 (其实发这篇文章的时候已经 1.0.3 了) 正式发布的博文 ^_^

Vue.js


Hi HN (Hacker News)! 如果你还不熟悉 Vue.js 的话,可以通过这篇文章 (英文)对其有个总体印象。

在经历了 300+ 次提交、8 次 alpha、4 次 beta 和 2 次 rc 之后,今天我很荣幸的向大家宣布 Vue.js 1.0.0 Evangelion 正式发布了!非常感谢所有参与 API 重设计的同学们——没有来自社区的贡献这是不可能完成的。

模板语法改进

1.0 的模板语法解决了很多微小的一致性问题,并使得 Vue 的模板更加简洁且易于阅读。最值得留意的新特性就是 v-onv-bind 的语法简写:

<!-- 简写版 v-bind:href -->
<a :href="someURL"></a>

<!-- 简写版 v-on:click -->
<button @click="onClick"></button>

当使用一个子组件的时候,v-on 用来监听自定义事件,v-bind 用来绑定属性 (props)。这些简写让子组件变得更易用:

<item-list
  :items="items"
  @ready="onItemsReady"
  @update="onItemsUpdate">
</item-list>

API 清理

Vue.js 1.0 的总体目标是使其适用于更大型的项目。这也是很多 API 被弃用的原因。在被弃用的 API 中,除了很少被用及之外,最常见的理由就是它会导致可维护性被破坏。特别是,我们弃用了难以维护的功能,并把组件提炼隔离开,使其不会对项目其它部分产生影响。

比如,在 0.12 中默认资源 (asset) 方案会隐性降级到组件树中的父级。这使得组件中的可用资源非常不确定,并且取决于在运行时的用法。在 1.0 中,所有的资源都基于严格模式进行解析,也没有了隐性降级。inherit 选项也被移除了,因为它很容易导致组件强耦合,无法提炼。

更快的初始化渲染

1.0 用 v-for 指令 (directive) 取代了 v-repeat。除了提供相同的功能和更直观的作用域之外,v-for 将初始化渲染大列表和大表格时的性能提升了 100%

更强大的工具

在 Vue.js core 之外,还有很多令人激动的东西:vue-loadervueify 的新升级,包括:

  • 组件热加载。当一个 *.vue 组件被编辑之后,其所有活跃实例都可以在页面不刷新的情况下完成热转换。这意味着你不需要重新加载 app 就可以完成诸如样式或模板的小调整;而 app 本身及其被转换的组件的状态可以被保留,这大大提升了开发体验。

  • 局部 CSS。通过在你的 *.vue 组件的 style 标签上简单加入一个 scoped 特性,该组件的模板和最终生成的 CSS 就会被奇妙的重写以保证组件的样式只被应用在其自身的元素上。最重要的是,父组件的特殊样式不会泄露到嵌套的子组件当中。

  • 默认支持 ES2015。JavaScript 一直在进化。你可以用最新的语法写出更简洁生动的代码。vue-loadervueify 现在会直接转换你的 *.vue 组件中的 JavaScript,无需额外的设置。今天,就来写未来的 JavaScript 吧!

结合 vue-router,Vue.js 现在不只是一个库了——它提供了一个构建复杂单页应用的稳固基础。

下一步?

如一般 1.0.0 所提倡的,核心 API 将会保持稳定服务于可预见的未来,库也做好了产品级别的准备。未来的开发会专注于:

  1. 改善 vue-loader 并使其做好产品级别的准备。

  2. 捋顺开发体验,比如更好的开发者工具和 Vue.js 项目/组件脚手架的 CLI。

  3. 提供更多诸如教程和示例的学习资料。