【Vue原理】Filters - 源碼版

oujie 發布于2019-08-23 18:22 / 2421人閱讀

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版嗨，又到周末啦，又可以睡

寫文章不容易，點個贊唄兄弟
專注 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，并調用，然后使用你函數執行的返回值渲染
太簡單了，總結跟沒總結一樣.......

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105109.html

【Vue原理】Mixin - 白話版

摘要：而我覺得現在出一個白話版，是讓大家有興趣去研究源碼的時候，可以提前理清一下思路。相當于封裝，提取公共部分。顯然，今天我不是來教大家怎么用的，怎么用看文檔就好了，我是講解生命的真諦內部的工作原理。而這個不會合并，直接替換掉整個選項寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版...

CollinPeng 2019-08-23 18:25 評論0 收藏0
【Vue原理】Mixins - 源碼版

寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】Mixins - 源碼版今天探索的是 mixins 的源碼，mixins 根據不同的選項類型會做不同的處理篇幅會有些長，...

gotham 2019-08-23 18:32 評論0 收藏0
【Vue原理】Component - 源碼版之創建組件VNode

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之創建組件今天就要開啟我寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

hover_lew 2019-08-23 18:34 評論0 收藏0
迷你版Vue--學習如何造一個Vue輪子

摘要：項目地址和的區別其實和最大的區別就是多了一個虛擬，其他的區別都是很小的。項目地址 Vue1和Vue2的區別其實Vue1和Vue2最大的區別就是Vue2多了一個虛擬DOM，其他的區別都是很小的。所以理解了Vue1的源碼，就相當于理解了Vue2，中間差了一個虛擬DOM的Diff算法文檔數據雙向綁定 Vue主流程走向組件 nextTick異步更新 MVVM 先來科普一下MVVM...

isLishude 2019-08-23 14:17 評論0 收藏0
Vue源碼解讀前必須要知道的Vue構建流程

摘要：了解的構建，可以從文件開始命令內關于構建的命令如下版本從命令看出是通過來進行構建的同樣的構建工具更強大一些，可以處理圖片等但是只做的處理，相比之下更輕量所以更適合框架的打包總共有三個版本的構建從版本的為起點來了解，版本的構建了解Vue的構建，可以從package.json文件開始sprits命令內關于構建的命令如下 { ... build: node scri...

MASAILA 2019-08-26 13:39 評論0 收藏0