Vue過濾器與計算屬性
阿新 • • 發佈：2019-01-23
過濾器
V1.x 版本
過濾器基礎
過濾器是一個通過輸入資料，能夠及時對資料進行處理並返回一個數據結果的簡單函式。Vue有很多很便利的過濾器，可以參考官方文件，http://cn.vuejs.org/api/#過濾器，過濾器通常會使用管道標誌 “ | ”， 語法：
{{ msg | uppercase }}Vue自帶的過濾器
1.Vue自帶的過濾器:capitalize
功能:首字母大寫
語法：{{message | capitalize}}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue自帶的過濾器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
{{message | capitalize}}
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
message: "abc"
}
})
</script>
</body>
</html> 2.Vue自帶的過濾器:uppercase
功能:全部大寫
語法： {{message | uppercase}}3.Vue自帶的過濾器:lowercase
功能:全部小寫
語法：{{message | lowercase}}4.Vue自帶的過濾器:currency
功能:輸出金錢以及小數點
引數:
第一個引數 {String} [貨幣符號] - 預設值: '$'
第二個引數 {Number} [小數位] - 預設值: 2
語法: {{message | currency '¥' "1"}} <!--輸出$123.5-->5.Vue自帶的過濾器:pluralize
功能: 如果只有一個引數，複數形式只是簡單地在末尾新增一個 “s”。如果有多個引數，引數被當作一個字串陣列，對應一個、兩個、三個…複數詞。如果值的個數多於引數的個數，多出的使用最後一個引數。
引數：{String} single, [double, triple, ...
{{item | pluralize 'item'}} <!--輸出: 1 item 2 items 3 items-->6.Vue自帶的過濾器:debounce
(1)限制： 需在@裡面使用
(2)引數:{Number} [wait] - 預設值： 300
(3)功能：包裝處理器，讓它延遲執行 x ms， 預設延遲 300ms。包裝後的處理器在呼叫之後至少將延遲 x ms， 如果在延遲結束前再次呼叫，延遲時長重置為 x ms。
<button id="btn" @click="disappear | debounce 10000">點選我,我將10秒後消失</button> 7.Vue自帶的過濾器:limitBy
(1)限制:需在v-for(即陣列)裡面使用
(2)兩個引數:
第一個引數:{Number} 取得數量
第二個引數:{Number} 偏移量
<ul v-for="item in lili | limitBy 10"> <!--輸出1 2 3 4 5 6 7 8 9 10-->
<li>{{item}}</li>
</ul>8.Vue自帶的過濾器:filterBy
(1)限制:需在v-for(即陣列)裡面使用
(2)三個引數:
第一個引數: {String | Function} 需要搜尋的字串
第二個引數: in (可選,指定搜尋位置)
第三個引數: {String} (可選,陣列格式)
<ul v-for="item in man | filterBy 'l' in 'name' "> <!--輸出lily lucy,含義輸出name屬性中含有l開頭的名字-->
<li>{{item.name}}</li>
</ul>9.Vue自帶的過濾器:orderBy (1)限制:需在v-for(即陣列)裡面使用
(2)三個引數:
第一個引數: {String | Array<String> | Function} 需要搜尋的字串
第二個引數: {String} 可選引數 order 決定結果升序（order >= 0）或降序（order < 0）,預設是升序2.0版本過濾器
在Vue2.0版本中1.0自帶過濾器均不可用，須採用自定義函式。官網提示：
Vue 2.x 中，過濾器只能在 mustache 繫結和 v-bind 表示式（從 2.1.0 開始支援）中使用，因為過濾器設計目的就是用於文字轉換。為了在其他指令中實現更復雜的資料變換，你應該使用計算屬性。new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})過濾器可以串聯：
{{ message | filterA | filterB }}過濾器是 JavaScript 函式，因此可以接受引數：
{{ message | filterA('arg1', arg2) }}這裡，字串 'arg1' 將傳給過濾器作為第二個引數， arg2 表示式的值將被求值然後傳給過濾器作為第三個引數。
過濾器專案應用總結
1.過濾器使用新增的全域性的過濾器使用時，必須定義在 Vue例項初始化前面,否則過濾器定義無效！
Vue.filter("discount",function (value,discount) {
return value * (discount/100);
});
Vue.filter("discount1",function (value) {
return value * 100;
});
2.對於子元件而言，父元件中自定義的過濾器在子元件中使用無效！可使用全域性新增的過濾器或在子元件內部自定義過濾器！
子元件中新增自定義過濾器！
filters:{
discount:function (value,discount) {
return value *(discount / 100); //| discount(25) | discount1
},
discount1:function (value) {
return value * 100;
}
}
3.對於1.0版本中常用的自帶過濾器 limitBy,filterBy,orderBy,可以分別採用分別用Array.slice,Array.filter和 Array.sort重寫一遍並不複雜。計算屬性
使用場景
當模板中放入太多的邏輯，模板過重且難以維護時，你都應當使用計算屬性。基礎例子
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
</script>這裡我們聲明瞭一個計算屬性 reversedMessage 。我們提供的函式將用作屬性 vm.reversedMessage 的 getter 。 vm.reversedMessage 的值始終取決於 vm.message 的值。
你可以像繫結普通屬性一樣在模板中繫結計算屬性。 Vue 知道 vm.reversedMessage 依賴於 vm.message ，因此當 vm.message 發生改變時，依賴於 vm.reversedMessage 的繫結也會更新。而且最妙的是我們是宣告式地建立這種依賴關係：計算屬性的 getter 是乾淨無副作用的，因此也是易於測試和理解的。計算快取 vs Methods
區別：不同的是計算屬性是基於它的依賴快取,而methods不依賴快取，每一次都需要重新執行；
計算屬性只有在它的相關依賴屬性值發生改變時才會重新取值。
computed: {
now: function () {
return Date.now()
}
} 計算屬性將不會更新，因為 Date.now() 不是響應式依賴;
我們為什麼需要快取？假設我們有一個重要的計算屬性 A ，這個計算屬性需要一個巨大的陣列遍歷和做大量的計算。然後我們可能有其他的計算屬性依賴於 A 。如果沒有快取，我們將不可避免的多次執行 A 的 getter ！如果你不希望有快取，請用 method 替代。計算屬性 vs Watched Property
區別：計算屬性可以監聽多個依賴屬性發生變化時，去觸發某一個執行函式（功能上更偏向與計算,資料的處理），而Watched Property 的本質是監聽單一依賴屬性發生變化時，獲取該屬性值變化時newVal oldVal觸發執行函式（偏向於屬性值得監聽）計算 setter
計算屬性預設只有 getter ，不過在需要時你也可以提供一個 setter ：
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
現在在執行 vm.fullName = 'John Doe' 時， setter 會被呼叫， vm.firstName 和 vm.lastName 也會被對應更新。觀察 Watchers
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的 watcher 。這是為什麼 Vue 提供一個更通用的方法通過 watch 選項，來響應資料的變化。當你想要在資料變化響應時，執行非同步操作或開銷較大的操作，這是很有用的。
使用 watch 選項允許我們執行非同步操作（訪問一個 API），限制我們執行該操作的頻率，並在我們得到最終結果前，設定中間狀態。這是計算屬性無法做到的。