摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版嗨，又到周末啦，又可以睡
写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】
如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧
【Vue原理】Filters - 源码版
嗨，又到周末啦，又可以睡懒觉了，冬天睡懒觉真苏胡，但是我明天要无名加班
好吧，今天我们 解读 filter 的工作原理（话题转得真是生硬），filter 其实实现也是非常简单的，所以这里直接出源码版了
十分钟就能大概了解这个 filter 了吧
好吧，今天的研究，我们仍然要带着问题去学习
1、页面的 filter 解析成什么
2、设置的 filter 如何被调用
下面的讲解会以下面例子 作为讲解模板
这里有一个过滤器 all，用来过滤 parentName
{{parentName|all }}
new Vue({
el:document.getElementsByTagName("div")[0],
data(){
return {
parentName:111
}
},
filters:{
all(){ return "我是过滤器" }
}
})
页面的 filter 解析成什么
首先，上面的例子会被解析成下面的渲染函数
(function() {
with(this) {
return _c("div",[
_v(_s(_f("all")(parentName)))
])
}
}
这段代码继续解释下
1、_c 是渲染组件的函数，这里会渲染出根组件
2、这是匿名自执行函数，后面渲染的时候调用，会 绑定当前实例为作用域
3、with 的作用是，绑定大括号内代码的 变量访问作用域，所以里面的所有变量都会从 实例上获取
然后，你可以看到 " parentName | all " 被解析成 _f("all")( parentName )
怎么解析的？
简单说就是，当匹配到 | 这个符号，就知道你用过滤器，然后就解析成 _f 去获取对应过滤器 并调用，这个过程不赘述
_f 是什么？
_f 是获取具体过滤器的函数
1、_f 会在Vue 初始化的时候，注册到 Vue 的原型上
// 已简化
function installRenderHelpers(target) {
target._s = toString;
target._f = resolveFilter;
}
installRenderHelpers(Vue.prototype);
所在在 上面的 渲染函数 with 绑定当前实例vm为作用域 之后，_f 从vm 获取，成了这样 vm._f
2、_f 是 resolveFilter，一个可以获取 具体filter 的函数
使用 _f("all") 就能获取到 all 这个过滤器，resolveFilter 下面会说
怎么获取下面继续.......
设置的 filter 如何被调用由上面可以看到，_f 是 resolveFilter 赋值的，下面是 resolveFilter 源码
// 已简化
function resolveFilter(id) {
return resolveAsset(
this.$options, "filters", id, true
) || identity
}
this.options 会拿到当前组件的所有选项
你问我为什么？
根据上一个问题知道
1、_f 会使用 实例去调用 ，vm._f 类等 vm.resolveFilter
2、所以，resolveFilter 的 执行上下文 this 是 vm
3、所以，this.$options 就是 实例的 options 啦
接着，调用 resolveAsset ，目的就是拿到 组件选项中的 具体 filter
传入 当前组件的选项 ，指定要其选项 filters ，指定具体 filter 名
function resolveAsset(
options, type, id, warnMissing
) {
// g：拿到 filters 选项
var assets = options[type];
// g：返回 调用的 filter
return assets[id]
}
_f("all") 流程 就成了下面这样
1、拿到 组件选项 中的 filters
2、然后再从 filters 中，拿到 all 这个filter
3、执行返回的 all 过滤函数时，传入需要过滤的值 parentName
4、得到 返回了 过滤后的值
所以，当渲染函数解析的时候，碰到使用过滤器的地方，按流程拿到过滤值后，就可以渲染到页面上了
_f("all")(parentName)) 就会变成 "我是过滤器" 放到 渲染函数中，最后，就是渲染到页面了
总结fitler 其实就是从组件选项 filters 获取你设置的某个filter，并调用，然后使用你函数执行的返回值渲染
太简单了，总结跟没总结一样.......
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105109.html
摘要：而我觉得现在出一个白话版，是让大家有兴趣去研究源码的时候，可以提前理清一下思路。相当于封装，提取公共部分。显然，今天我不是来教大家怎么用的，怎么用看文档就好了，我是讲解生命的真谛内部的工作原理。而这个不会合并，直接替换掉整个选项 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版...
写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】Mixins - 源码版 今天探索的是 mixins 的源码，mixins 根据不同的选项类型会做不同的处理 篇幅会有些长，...
摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之创建组件今天就要开启我 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...
摘要：项目地址和的区别其实和最大的区别就是多了一个虚拟，其他的区别都是很小的。 项目地址 Vue1和Vue2的区别 其实Vue1和Vue2最大的区别就是Vue2多了一个虚拟DOM，其他的区别都是很小的。所以理解了Vue1的源码，就相当于理解了Vue2，中间差了一个虚拟DOM的Diff算法 文档 数据双向绑定 Vue主流程走向 组件 nextTick异步更新 MVVM 先来科普一下MVVM...
摘要：了解的构建，可以从文件开始命令内关于构建的命令如下版本从命令看出是通过来进行构建的同样的构建工具更强大一些，可以处理图片等但是只做的处理，相比之下更轻量所以更适合框架的打包总共有三个版本的构建从版本的为起点来了解，版本的构建 了解Vue的构建，可以从package.json文件开始sprits命令内关于构建的命令如下 { ... build: node scri...
阅读 3449·2021-09-22 15:02
阅读 3469·2021-09-02 15:21
阅读 2115·2019-08-30 15:55
阅读 2758·2019-08-30 15:44
阅读 754·2019-08-29 16:56
阅读 2404·2019-08-23 18:22
阅读 3324·2019-08-23 12:20
阅读 3048·2019-08-23 11:28
