Vue中的filter是怎么实现的？

Question

{{ 10 | fn1 | fn2 }}

比如在vue的模板中可以这样使用filter。
我很好奇，Vue具体是怎么去实现它的？有没有简单的解释下？

Answer 1

抛开Vue的机制，大概类似这样吧。

// 视图中的字符串
let str = '10 | fn1 | fn2';
// 模型中的宿主对象
let host = {
  fn1: a => 2 * a,
  fn2: a => 3 + a
};

filter(str, host); // 3 + (2 * 10) = 23

function filter(str, host) {
  let arr = str.split(/\s*\|\s*/g);
  return arr.slice(1).reduce((a, b) => host[b](a), arr[0]);
}

Answer 2

就是普通的函数调用啊，书写的形式有点像管道，将面的值或结果为后边的入参，比如 10 | fn1 | fn2 | fn3，通过解析字符串，按照|分割，得到['10', 'fn1', 'fn2', 'fn3']， 那么调用的过程就是：

fn3(fn2(fn1(10)))

Answer 3

有没有更为通俗点的解释？可以不用代码。