• 开始时间：2019-11-12
  • 目标主要版本：3.x
  • 引用 issue：N/A
  • 实现的 PR：N/A

摘要

移除对 filters 的支持。

基本范例

  1. <!-- before -->
  2. {{ msg | format }}
  4. <!-- after -->
  5. {{ format(msg) }}

动机

  • 过滤器的功能很容易地用方法或者计算属性来复制，所以它提供的主要是语法上的价值而不是实用价值。
  • 过滤器需要一个自定义的微观语法，它打破了表达式 “只是 JavaScript” 的驾驶 —— 这增加了学习和实现的成本。事实上，它与 JavaScript 自己的位或运算符冲突 (|)，使表达式的解析更加复杂。
  • 过滤器也会在模版 IDE 支持中造成额外的复杂性（同样由于它不是真正的 JavaScript）。

具体设计

N/A

缺点

  • 当链接的多个过滤器和调用多个函数时，过滤器的阅读效果会更好一些。

    1. msg | uppercase | reverse | pluralize
    2. // vs
    3. pluralize(reverse(uppercase(msg)))

    然而，在实践中，我们发现计数超过 2 的链接过滤器是相当罕见的，所以可读性的损失似乎可以接受。

  • 与全局注册的过滤器相比，单独导入或者自定义方法可能会更像一个 boilerplate-y。然而，全局过滤器在 Vue.prototype 上注册特别命名的全局 helper 没有本质的区别。这种全局注册是有代价的：它们使代码的依赖关系不那么明确，也使它们难以提供类型推导。

备选方案

目前有一个 stage 1 的提案，即在 JavaScript 中加入管道操作符，它提供了基本类似的语法便利：

  1. let transformedMsg = msg |> uppercase |> reverse |> pluralize

考虑到这个提案有可能最终落地，像 Vue 这样的框架最好不要提供类似的替代方案（尤其是与现有的 JavaScript 冲突的语法）。

也就是说，改提案仍处于 stage 1，而且已经很久没有收到更新了，所以还完全不清楚它是否会落地，或者会按现在的设计落地。对 Vue 来说，将其作为官方 API 的一部分是有风险的，因为如果规范最终发生变化，

在 Vue3 中，模版表达式解析实用 @babel/parser, 可以通过 expressionPlugin 编译器选项（作为 plugins 选项传递给 @babel/parser）启用对模版中管道操作符语法的支持。请注意，Vue 模版编译选项只启用了语法的解析 —— 生成渲染函数需要由 Babel 进一步转移（基于 webpack 的新设置中默认为转译）。

采纳策略

过滤器可以在 2.x 的兼容性构建中得到支持，并有警告以指导逐步迁移。

没有解决的问题

N/A