Vue.js 0.12 发布！

2015 年 6 月 11 日

我非常激动地宣布 Vue.js 0.12: 龙珠终于发布了！感谢所有尝试过 beta/rc 版本并提供反馈/bug 报告的人。

这个版本有很多内容需要介绍，下面我们将会谈论一些亮点。但是，如果您要从 0.11 升级，仍然建议您仔细阅读完整发布说明和更新的文档。您可以在 GitHub 上报告 bug，将问题发送到 vuejs/Discussion，或者加入我们的 Gitter 聊天频道。

更一致的组件语法

之前在 0.11 中，您有两种方法可以使用 Vue.js 组件：使用 v-component 指令，或者使用自定义元素。还有两种方法可以将数据传递给子组件：使用 v-with 指令，或者使用 paramAttributes 选项。虽然自定义元素和 param 属性最终都会被编译成指令，但拥有两套语法来实现相同的功能是令人困惑且冗余的。

此外，需要注意的是，组件系统是 Vue.js 中的一级概念，甚至比指令更重要。它定义了我们如何封装更高层的视图逻辑以及如何组合我们的应用程序。同时，拥有一个清晰且声明式的方法将数据传递给子组件也非常重要。组件和 param 属性确实应该拥有自己的专用语法，以区别于其他指令。

因此，v-component 和 v-with 在 0.12 中已被弃用。paramAttributes 也被重命名为 props，它更短更简洁。从现在开始，大多数 Vue.js 组件将看起来像这样

<my-component prop="{{parentData}}"></my-component>

还有一些与 props 相关的改进，例如显式的一次性或单向 props、表达式作为 props、方法作为 prop 回调等等。您可以在上面链接的 0.12 发布说明和更新的组件系统部分中找到更多详细信息。

过滤器参数改进

在 0.11 中，过滤器总是将它们的 arguments 作为纯字符串接收。一个 argument 可以用引号括起来以包含空格，但引号不会在传递给过滤器函数时自动去除。一些用户也对如何在 vm 上获取动态值而不是纯字符串感到困惑。

在 0.12 中，过滤器 argument 语法现在遵循一个简单的规则：如果一个 argument 用引号括起来，它将作为纯字符串传递；否则，它将作为动态值针对当前 vm 进行评估。

这意味着一些现有过滤器的用法将不得不改变

<a v-on="keyup: onKeyUp | key 'enter'"></a>
{{ items.length | pluralize 'item' }}

但这将使依赖于动态值的自定义过滤器更容易编写

{{ msg | concat otherMsg }}

这里 concat 过滤器的第一个 argument 将是 this.otherMsg 的值。

异步组件

在构建大型单页应用程序时，将所有 JavaScript 捆绑到一个文件中是一种常见的做法。但是，当文件变得太大时，我们可能希望延迟加载应用程序的某些部分以加快初始加载速度。但是，这确实对应用程序架构的设计方式提出了一些限制。弄清楚如何正确地拆分 JavaScript 捆绑包可能非常棘手。

好吧，使用 Vue.js，我们已经可以将应用程序构建为解耦的组件。如果我们可以在需要时才懒加载动态组件，那不是太棒了吗？事实上，在 0.12 中，使用新的异步组件功能，这将非常容易。

在 0.12 中，您可以将组件定义为一个工厂函数，该函数异步解析一个组件定义（可以只是一个简单的选项对象）。Vue.js 只有在组件实际需要渲染时才会触发工厂函数，并将结果缓存以供将来重新渲染

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

由您决定如何从服务器加载组件，例如 $.getScript() 或 require.js；但推荐的用法是将其与 Webpack 的代码拆分功能配合使用

Vue.component('async-webpack-example', function (resolve, reject) {
  // In Webpack AMD like syntax indicates a code split point
  require(['./my-async-component'], resolve)
})

这就是您需要做的。您可以像以前一样使用组件，甚至不用考虑它是异步的。Webpack 将自动将您的最终 JavaScript 拆分为具有正确依赖项的单独捆绑包，并在需要时通过 Ajax 自动加载捆绑包。您可以查看一个完整的示例这里。

改进的过渡系统

Vue.js 的过渡系统非常易于使用，但在过去，它有一个限制，即您不能将基于 CSS 的过渡与基于 JavaScript 的过渡混合使用。在 0.12 中，这种情况不再存在！改进的过渡系统现在允许您向基于 CSS 的过渡添加 JavaScript 钩子，以进行额外的控制。公开的钩子数量也已扩展，以便您在过渡的每个阶段都拥有更细粒度的控制。

v-repeat 现在还内置支持交错过渡。只需在重复的元素中添加 stagger="100" 即可。也可以为进入和离开定义单独的交错，甚至可以在 JavaScript 钩子中动态计算交错延迟。

有关新过渡系统的完整详细信息，请查看更新的指南。

性能调优

Vue.js 的精确依赖项跟踪使其成为最有效的用于小型热更新的视图层之一，但总有改进的空间。在 0.12 中，内部实例创建和编译重构将大型列表的首次渲染性能提高了 40%。通过正确使用 track-by，使用大型全新数据集重新渲染也与其他基于 Virtual-DOM 的框架相当，甚至更快。

还有一件事…

随着 0.12 的发布，我们将投入更多精力到官方的 vue-router 上，这是一个专为 Vue.js 设计的路由库，它具有嵌套视图匹配、完整的过渡支持和异步数据钩子。我已经表达过 Vue.js 核心旨在保持为一个无装饰的、可直接使用的视图层库，这一点不会改变。vue-router 将单独发布，完全可选，但是您可以期待它在您需要时与 Vue.js 核心无缝协作。

最新文章