用法 Vue.js 允許你自定義過濾器，可被用於一些常見的文本格式化。過濾器可以用在兩個地方：雙花括弧插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，例如: 渲染結果為: 當我們在頁面里輸出某些數據，需要進行格式轉換的時候可以 ...
Vue.js 允許你自定義過濾器，可被用於一些常見的文本格式化。過濾器可以用在兩個地方：雙花括弧插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app"><p>{{no | add(100) }}</p></div> <script> debugger var app = new Vue({ el:"#app", data:{no:123}, filters:{ add:function(val,i){return val+i} } }) </script> </body> </html>
渲染結果為:
當我們在頁面里輸出某些數據，需要進行格式轉換的時候可以用這個過濾器
源碼分析
parse()解析模板時遇到文本時會執行parseText()函數，如下:
function parseText ( //第8575行 解析模板時用於解析文本 text, delimiters ) { var tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE; if (!tagRE.test(text)) { //匹配是否有表達式,比如:{{message}} 如果沒有，則表示是純文本節點,則直接返回不做處理 return } var tokens = []; var rawTokens = []; var lastIndex = tagRE.lastIndex = 0; var match, index, tokenValue; while ((match = tagRE.exec(text))) { //用正則tagRE去匹配text,此時match就是text里的每個值，對於:{{item}}:{{index}}來說,match等於Array["{{item}}","item"] 、 Array["{{index}}","index"] index = match.index; //該數據的起始索引 // push text token if (index > lastIndex) { //如果index大於lastIndex，表明中間還有一段文本，比如:{{item}}:{{index}}，中間的:就是文本 rawTokens.push(tokenValue = text.slice(lastIndex, index)); tokens.push(JSON.stringify(tokenValue)); } // tag token var exp = parseFilters(match[1].trim()); //調用parseFilters對match[1做解析] ;例如{{no | add(100) }}，解析後的格式為:_f("add")(no,100) tokens.push(("_s(" + exp + ")")); rawTokens.push({ '@binding': exp }); lastIndex = index + match[0].length; //設置下一次開始匹配的位置 } if (lastIndex < text.length) { rawTokens.push(tokenValue = text.slice(lastIndex)); tokens.push(JSON.stringify(tokenValue)); } return { expression: tokens.join('+'), //拼湊成一個 表達式，例如:"_s(item)+":"+_s(index)" tokens: rawTokens //模板信息，例如[{@binding: "item"},":",{@binding: "index"}] } }
parseFilters定義在6436行，就是解析每個字元，最後拼湊出一個_f的字元，例子中執行完後等於
最後執行render函數的時候會執行_f函數，也就是Vue內部的resolveFilter函數，如下:
function resolveFilter (id) { //第3774行 過濾器對應的函數 return resolveAsset(this.$options, 'filters', id, true) || identity //執行resolveAsset函數 }
resolveAsset會獲取對應資源(過濾器、組件、指令等),返回對應函數，如下:
function resolveAsset ( //第1498行 options:Vue實例的$options對象 type:類型，比如:components、filters id:獲取的ID options, type, id, warnMissing ) { /* istanbul ignore if */ if (typeof id !== 'string') { return } var assets = options[type]; // check local registration variations first if (hasOwn(assets, id)) { return assets[id] } //先從當前實例上找id var camelizedId = camelize(id); if (hasOwn(assets, camelizedId)) { return assets[camelizedId] } //將id轉化為駝峰式後再找 var PascalCaseId = capitalize(camelizedId); if (hasOwn(assets, PascalCaseId)) { return assets[PascalCaseId] } //如果還沒找到則嘗試將首字母大寫查找 // fallback to prototype chain var res = assets[id] || assets[camelizedId] || assets[PascalCaseId]; //最後通過原型來查找 if ("development" !== 'production' && warnMissing && !res) { warn( 'Failed to resolve ' + type.slice(0, -1) + ': ' + id, options ); } return res }
執行完後_f("add")(no,100)里的_f("add")就會變成app實例里的add過濾器對應的函數了
