过滤器的底层原理

function resoLveAsset(options, type, id, warnMissing) {

    if (typeof (id) !== 'string') {

        return;

    }

    const assets = options[type];

    if (hasOwn(assets, id)) return assets[id];

    const camelizedId = camelize(id);

    if (hasOwn(assets, camelizedId)) return assets[camelizedId];

    const PascalCaseId = capitlize(camelizedId);

    if (hasOwn(assets, PascalCaseId)) return assets[PascalCaseId];

    // const res assets[id] || assets[camelizedId]||PascalCaseId

    if(process.env.NODE_ENV!=='production'&& warnMissing&&!res){

        warn('Fail to resolve' + type.slice(0,-1)+':'+id, options);

    }

    return res;

}

• 判断过滤器id是否为字符串，不是则终止
• 用assets存储过滤器
• hasOwn函数检查assets自身是否存在id属性，存在则返回
• hasOwn函数检查assets自身是否存在驼峰化后的id属性，存在则返回
• hasOwn函数检查assets自身是否存在将首字母大写后的id属性，存在则返回
• 如果还是没有，就是去原型链找，找不到就会打印警告

过滤器的原理其实很简单，无非就是在编译阶段就把过滤器编译成函数进行调用，串联的过滤器就是嵌套调用。关于编译成函数的时候就是利用vue的内部函数parseFilters，解析过滤器列表并进行拼接字符串。