Vue中filter原理分析

2021-10-09 09:48:20 字數 916 閱讀 3454

頁面中的渲染函式會被生成如下的渲染函式

// }

(function()

}

其中_c是渲染函式,會渲染出根元件。可以看到parentname | all最終被解析成_f('all')(parentname)。接下來主要看一些_f這個函式的作用,以及_f解決了什麼問題?

function

installrenderhelpers

(target)

installrenderhelpers

(vue.prototype)

;

從上面的installrenderhelpers可以看到_f是vue原型上的resolvefilter方法。(渲染函式中因為用了with這個操作,所以_f會在vue的例項和原型上查詢。)

resolvefilter其實就是屬於filter的呼叫流程了。其實resolvefilter的原理比較簡單,原始碼中實際上就是乙個個呼叫的過程。

function

resolvefilter

(id)

function

resolveasset

( options, type, id, war****sing

)

過程還是比較清楚,resolveasset就是先拿到了所有的filters, 然後從filters中拿到了我們需要的那個filter函式。

Vue中methods原理分析

methods繫結上下文執行環境是通過bind來進行的。固定了這個this。vue考慮到不是所有的瀏覽器都支援bind。於是也實現了自己的polyfillbind function polyfillbind fn,ctx function nativebind ctx varbind functio...

Vue中directive原理分析

vue在處理指令時,會首先判斷指令是新的還是舊的。也就是需要對比舊節點和新節點上的指令。比如新節點比舊節點上多了乙個指令。新節點上指令如下 newdirectives v test2 舊節點上指令如下 newdirectives 可以看到新節點上增加了乙個指令v test2,當我們遍歷發現v tes...

vue中filter的使用

今天我們來學習一下filter的使用和在專案中的應用 此處我們在專案中使用filter來顯示多少月多少日,星期幾 在這裡我主要把他分為三步。第一步 此處建議使用乙個檔案來存放 因為你可能不只需要使用乙個過濾函式 第二步 在全域性main.js中引入此檔案,方便在所以檔案中使用 第三步就是在具體檔案中...