成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【Vue原理】Filters - 源碼版

oujie / 2448人閱讀

摘要:寫文章不容易,點(diǎn)個(gè)贊唄兄弟專注源碼分享,文章分為白話版和源碼版,白話版助于理解工作原理,源碼版助于了解內(nèi)部詳情,讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看,請點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理源碼版嗨,又到周末啦,又可以睡

寫文章不容易,點(diǎn)個(gè)贊唄兄弟
專注 Vue 源碼分享,文章分為白話版和 源碼版,白話版助于理解工作原理,源碼版助于了解內(nèi)部詳情,讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺得排版難看,請點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧

【Vue原理】Filters - 源碼版

嗨,又到周末啦,又可以睡懶覺了,冬天睡懶覺真蘇胡,但是我明天要無名加班

好吧,今天我們 解讀 filter 的工作原理(話題轉(zhuǎn)得真是生硬),filter 其實(shí)實(shí)現(xiàn)也是非常簡單的,所以這里直接出源碼版了
十分鐘就能大概了解這個(gè) filter 了吧
好吧,今天的研究,我們?nèi)匀灰獛е鴨栴}去學(xué)習(xí)

1、頁面的 filter 解析成什么
2、設(shè)置的 filter 如何被調(diào)用

場景設(shè)置

下面的講解會(huì)以下面例子 作為講解模板

這里有一個(gè)過濾器 all,用來過濾 parentName

{{parentName|all }}
new Vue({    
    el:document.getElementsByTagName("div")[0],
    data(){        
        return {            
            parentName:111
        }
    },    
    filters:{
        all(){  return "我是過濾器" }
    }
})
頁面的 filter 解析成什么

首先,上面的例子會(huì)被解析成下面的渲染函數(shù)

(function() {      
    with(this) {            
        return _c("div",[                
            _v(_s(_f("all")(parentName)))            
        ])      
    }
}

這段代碼繼續(xù)解釋下

1、_c 是渲染組件的函數(shù),這里會(huì)渲染出根組件

2、這是匿名自執(zhí)行函數(shù),后面渲染的時(shí)候調(diào)用,會(huì) 綁定當(dāng)前實(shí)例為作用域

3、with 的作用是,綁定大括號(hào)內(nèi)代碼的 變量訪問作用域,所以里面的所有變量都會(huì)從 實(shí)例上獲取

然后,你可以看到 " parentName | all " 被解析成 _f("all")( parentName )

怎么解析的?

簡單說就是,當(dāng)匹配到 | 這個(gè)符號(hào),就知道你用過濾器,然后就解析成 _f 去獲取對應(yīng)過濾器 并調(diào)用,這個(gè)過程不贅述

_f 是什么?

_f 是獲取具體過濾器的函數(shù)

1、_f 會(huì)在Vue 初始化的時(shí)候,注冊到 Vue 的原型上

// 已簡化
function installRenderHelpers(target) {
      target._s = toString;
      target._f = resolveFilter;
}
installRenderHelpers(Vue.prototype);

所在在 上面的 渲染函數(shù) with 綁定當(dāng)前實(shí)例vm為作用域 之后,_f 從vm 獲取,成了這樣 vm._f

2、_f 是 resolveFilter,一個(gè)可以獲取 具體filter 的函數(shù)

使用 _f("all") 就能獲取到 all 這個(gè)過濾器,resolveFilter 下面會(huì)說

怎么獲取下面繼續(xù).......

設(shè)置的 filter 如何被調(diào)用

由上面可以看到,_f 是 resolveFilter 賦值的,下面是 resolveFilter 源碼

// 已簡化

function resolveFilter(id) {    
    return resolveAsset(
        this.$options, "filters", id, true
    ) || identity
}

this.options 會(huì)拿到當(dāng)前組件的所有選項(xiàng)

你問我為什么?

根據(jù)上一個(gè)問題知道

1、_f 會(huì)使用 實(shí)例去調(diào)用 ,vm._f 類等 vm.resolveFilter

2、所以,resolveFilter 的 執(zhí)行上下文 this 是 vm

3、所以,this.$options 就是 實(shí)例的 options 啦

接著,調(diào)用 resolveAsset ,目的就是拿到 組件選項(xiàng)中的 具體 filter

傳入 當(dāng)前組件的選項(xiàng) ,指定要其選項(xiàng) filters ,指定具體 filter 名

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

    // g:拿到  filters 選項(xiàng)
    var assets = options[type];      

    // g:返回 調(diào)用的 filter
    return assets[id]
}

_f("all") 流程 就成了下面這樣

1、拿到 組件選項(xiàng) 中的 filters

2、然后再從 filters 中,拿到 all 這個(gè)filter

3、執(zhí)行返回的 all 過濾函數(shù)時(shí),傳入需要過濾的值 parentName

4、得到 返回了 過濾后的值

所以,當(dāng)渲染函數(shù)解析的時(shí)候,碰到使用過濾器的地方,按流程拿到過濾值后,就可以渲染到頁面上了

_f("all")(parentName)) 就會(huì)變成 "我是過濾器" 放到 渲染函數(shù)中,最后,就是渲染到頁面了

總結(jié)

fitler 其實(shí)就是從組件選項(xiàng) filters 獲取你設(shè)置的某個(gè)filter,并調(diào)用,然后使用你函數(shù)執(zhí)行的返回值渲染
太簡單了,總結(jié)跟沒總結(jié)一樣.......

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/105109.html

相關(guān)文章

  • Vue原理】Mixin - 白話

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

    CollinPeng 評論0 收藏0
  • Vue原理】Mixins - 源碼

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

    gotham 評論0 收藏0
  • Vue原理】Component - 源碼 之 創(chuàng)建組件VNode

    摘要:寫文章不容易,點(diǎn)個(gè)贊唄兄弟專注源碼分享,文章分為白話版和源碼版,白話版助于理解工作原理,源碼版助于了解內(nèi)部詳情,讓我們一起學(xué)習(xí)吧研究基于版本如果你覺得排版難看,請點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理源碼版之創(chuàng)建組件今天就要開啟我 寫文章不容易,點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享,文章分為白話版和 源碼版,白話版助于理解工作原理,源碼版助于了解內(nèi)部詳情,讓我們一起學(xué)習(xí)吧研究基于...

    hover_lew 評論0 收藏0
  • 迷你Vue--學(xué)習(xí)如何造一個(gè)Vue輪子

    摘要:項(xiàng)目地址和的區(qū)別其實(shí)和最大的區(qū)別就是多了一個(gè)虛擬,其他的區(qū)別都是很小的。 項(xiàng)目地址 Vue1和Vue2的區(qū)別 其實(shí)Vue1和Vue2最大的區(qū)別就是Vue2多了一個(gè)虛擬DOM,其他的區(qū)別都是很小的。所以理解了Vue1的源碼,就相當(dāng)于理解了Vue2,中間差了一個(gè)虛擬DOM的Diff算法 文檔 數(shù)據(jù)雙向綁定 Vue主流程走向 組件 nextTick異步更新 MVVM 先來科普一下MVVM...

    isLishude 評論0 收藏0
  • Vue源碼解讀前必須要知道的Vue構(gòu)建流程

    摘要:了解的構(gòu)建,可以從文件開始命令內(nèi)關(guān)于構(gòu)建的命令如下版本從命令看出是通過來進(jìn)行構(gòu)建的同樣的構(gòu)建工具更強(qiáng)大一些,可以處理圖片等但是只做的處理,相比之下更輕量所以更適合框架的打包總共有三個(gè)版本的構(gòu)建從版本的為起點(diǎn)來了解,版本的構(gòu)建 了解Vue的構(gòu)建,可以從package.json文件開始sprits命令內(nèi)關(guān)于構(gòu)建的命令如下 { ... build: node scri...

    MASAILA 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<