Vue計算屬性與偵聽器和過濾器超詳細介紹
更新時間：2022年10月03日 10:18:33 作者：月光曬了很涼快
這篇文章主要介紹了Vue計算屬性與偵聽器和過濾器，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1. 計算屬性
1.1 使用方法
概述：
模板中放入太多的邏輯會讓模板過重且難以維護，使用計算屬性可以讓模板變得簡潔易于維護。計算屬性是基于它們的響應式依賴進行緩存的，計算屬性比較適合對多個變量或者對象進行處理后返回一個結果值，也就是數(shù)多個變量中的某一個值發(fā)生了變化則我們監(jiān)控的這個值也就會發(fā)生變化。
計算屬性定義在Vue對象中，通過關鍵詞computed屬性對象中定義一個個函數(shù)，并返回一個值，使用計算屬性時和data中的數(shù)據(jù)使用方式一致。
使用：
當不使用計算屬性時，我們想要計算模板中的結果，可以有下面幾種寫法：
<div id="app">
<!-- 方法1：vue在使用時，不推薦在模板中來寫過多的邏輯 -->
<h3>{{ n1+n2 }}</h3>
<!-- 方法2：對于一個計算結果，可能在當前的頁面中，顯示多個，顯示幾次就調(diào)用這個函數(shù)幾次，性能會降低 -->
<h3>{{ sum() }}</h3>
<h3>{{ sum() }}</h3>
<h3>{{ sum() }}</h3>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
n1: 1,
n2: 2
},
methods: {
sum() {
console.log('sum --- methods');
return this.n1 + this.n2
}
}
})
</script>
如果對于一個結果，進行計算，可以使用vue提供計算屬性來完成，而且計算屬性它還具有緩存功能。如果你的依賴項，沒有發(fā)生改變，則它會在再一次調(diào)用時，會讀取緩存中的數(shù)據(jù)。
<div id="app">
<div>{{total}}</div>
<div>{{total}}</div>
<div>{{total}}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
n1: 1,
n2: 2
},
// 計算[屬性]
computed: {
// 調(diào)用時，直接寫名稱就可以，不用寫小括號
// 計算屬性中的依賴項，可以是一個，也是可以N個,取決于你在計算屬性中調(diào)用多少
// 注：此方法中不能寫異步
// 簡寫 使用最多的寫法
total() {
console.log('computed -- total')
// 在計算屬性中，調(diào)用了 n1和n2，則n1和n2就是它的依賴項，如果這兩個依賴項，有一個發(fā)生改變，則它會重新計算，如果兩個都沒有發(fā)生改變，則第2之后調(diào)用，讀取緩存中的數(shù)據(jù)
return this.n1 + this.n2
}
},
methods: {
// 計算屬性中的方法在 methods 中也可以調(diào)用
sum() {
console.log('sum --- methods', this.total);
return this.n1 + this.n2
}
}
})
</script>
注意：
- 計算屬性在調(diào)用時，在模板中直接寫名稱就可以，不用寫小括號。
- 在計算屬性中，調(diào)用了 n1和n2，則n1和n2就是它的依賴項，如果這兩個依賴項，有一個發(fā)生改變，則它會重新計算，如果兩個都沒有發(fā)生改變，則第2之后調(diào)用，讀取緩存中的數(shù)據(jù)。這也就是為什么上面計算了3次，卻只調(diào)用了一次計算方法，因為計算屬性中的依賴項沒有發(fā)生改變。
- 計算屬性中的依賴項，可以是一個，也是可以N個，取決于你在計算屬性中調(diào)用多少。
- 計算屬性中的方法中不能寫異步。
- 上面計算屬性，是簡寫。簡寫是使用最多的方法。
- 計算屬性不僅可以在模板中調(diào)用，也可以在 method 中調(diào)用。
如果定義的計算屬性，為簡寫方式，則給計算屬性賦值時，會報錯。只有標準的寫法時，它才可以對于計算屬性進行賦值操作。下面我們就來看一下標準寫法是怎樣的。
<div id="app">
<h3>{{ sum() }}</h3>
<h3>{{msg}}</h3>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
n1: 1,
n2: 2,
msg: ''
},
// 計算[屬性]
computed: {
// 標準寫法
total: {
// 簡寫只是實現(xiàn)的了標準寫法中的get方法
get() {
return this.n1 + this.n2
},
set(newVal) {
if (newVal > 10) {
this.msg = '值有點的大'
}
}
}
},
methods: {
sum() {
// 賦值只會觸發(fā)標準方式中的set方法，然后你可以得到它，完成一些別的工作
if (this.total > 6) {
this.total = 101
}
return this.n1 + this.n2
}
}
})
</script>
注意：
- 簡寫方式只是實現(xiàn)的了標準寫法中的get方法。
- 賦值只會觸發(fā)標準方式中的set方法，然后你可以得到新的值，完成一些別的工作。
1.2 案例-購物車合計使用計算屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue學習使用</title>
<!-- 第1步： 引入vue庫文件 -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 第2步：掛載點 -->
<div id="app">
<table border="1" width="600">
<tr>
<th>序號</th>
<th>名稱</th>
<th>單價</th>
<th>數(shù)量</th>
<th>操作</th>
</tr>
<tr v-for="item,index in carts">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="setNum(1,index)">+++</button>
<input type="number" v-model="item.num">
<button @click="setNum(-1,index)">---</button>
</td>
<td>
<button @click="del(index)">刪除</button>
</td>
</tr>
</table>
<hr>
<h3>
合計：
{{totalPrice}}
</h3>
</div>
<!-- 第3步：實例化vue -->
<script>
const vm = new Vue({
el: '#app',
data: {
carts: [
{ id: 1, name: '小米12pro', price: 1, num: 1 },
{ id: 2, name: '華為手機', price: 2, num: 1 },
{ id: 3, name: '水果手機', price: 3, num: 1 },
]
},
methods: {
setNum(n, index) {
this.carts[index].num += n
this.carts[index].num = Math.min(3, Math.max(1, this.carts[index].num))
},
del(index) {
confirm('確定刪除') && this.carts.splice(index, 1)
}
},
// 計算屬性
computed: {
totalPrice() {
return this.carts.reduce((prev, { price, num }) => {
// 依賴項
prev += price * num
return prev
}, 0)
}
}
})
</script>
</body>
</html>
2. 偵聽器
概述：
使用watch來偵聽data中數(shù)據(jù)的變化,watch中的屬性一定是data 中已經(jīng)存在的數(shù)據(jù)。
當需要監(jiān)聽一個對象的改變時，普通的watch方法無法監(jiān)聽到對象內(nèi)部屬性的改變，只有data中的數(shù)據(jù)才能夠監(jiān)聽到變化，此時就需要deep屬性對對象進行深度監(jiān)聽。
使用：
標準寫法：
<div id="app">
<div>
<input type="text" v-model="username">
<span>{{errorUsername}}</span>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: '',
errorUsername: ''
},
// 監(jiān)聽器，它用來監(jiān)聽data配置中的數(shù)據(jù)的變化，一但有變化，就會自動觸發(fā).默認情況下，初始化不觸發(fā)
// 在監(jiān)聽器中是可以得到this對象的
// 監(jiān)聽器它的依賴項，只有一個，一對一
// 監(jiān)聽器中可以寫異步
watch: {
// 方法名或?qū)傩悦?就是你要觀察的data中的屬性名稱
// 標準寫法
username: {
// newValue 變化后的值;oldValue 變化前的值
handler(newValue, oldValue) {
if (newValue.length >= 3) this.errorUsername = '賬號過長'
else this.errorUsername = ''
}
}
})
</script>
注意：
- 監(jiān)聽器用來監(jiān)聽data配置中的數(shù)據(jù)的變化，一但有變化，就會自動觸發(fā).默認情況下，初始化不觸發(fā)。
- 在監(jiān)聽器中是可以得到this對象的。
- 監(jiān)聽器的依賴項，只有一個，一對一。
- 監(jiān)聽器中可以寫異步（Ajax 或者 setTimeout）。
簡寫：
<div id="app">
<div>
<input type="text" v-model="username">
<span>{{errorUsername}}</span>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: '',
errorUsername: ''
},
watch: {
username(newValue, oldValue) {
if (newValue.length >= 3) this.errorUsername = '賬號過長'
else this.errorUsername = ''
}
}
})
</script>
初始化時，啟用偵聽器寫法：
<div id="app">
<div>
<input type="text" v-model="username">
<span>{{errorUsername}}</span>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: 'aaa',
errorUsername: ''
},
watch: {
// 方法名或?qū)傩悦?就是你要觀察的data中的屬性名稱
// 標準寫法
username: {
handler(newValue, oldValue) {
if (newValue.length >= 3) this.errorUsername = '賬號過長'
else this.errorUsername = ''
},
// 初始時，執(zhí)行1次 --- 一般情況下，不啟用 只有在標準寫法下面，才有此配置
immediate: true
}
})
</script>
注意：這個配置只有在標準寫法下才能有。
監(jiān)聽對象中的屬性變化：
<div id="app">
<div>
<input type="number" v-model.number="user.id">
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
user: { id: 100, name: 'aaa' }
},
// 監(jiān)聽對象中的指定的屬性數(shù)據(jù)的變化 推薦如果你監(jiān)聽的是一個對象中數(shù)據(jù)變化，建議這樣的方式
watch: {
'user.id'(newValue, oldValue){
console.log(newValue, oldValue);
}
}
})
</script>
監(jiān)聽對象變化：
<div id="app">
<div>
<input type="number" v-model.number="user.id">
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
user: { id: 100, name: 'aaa' }
},
watch: {
// 監(jiān)聽對象,只能使用標準方式來寫
// 監(jiān)聽對象變化，它的前后值是一樣的，無法區(qū)分
user: {
// 深度監(jiān)聽
deep: true,
handler(newValue, oldValue) {
console.log(newValue, oldValue);
},
}
}
})
</script>
注意：
- 監(jiān)聽對象，只能使用標準方式來寫
- 監(jiān)聽對象變化，它的前后值是一樣的，無法區(qū)分
3. 過濾器
概述：
在數(shù)據(jù)被渲染之前，可以對其進行進一步處理，比如將字符截取或者將小寫統(tǒng)一轉(zhuǎn)換為大寫等等，過濾器本身就是一個方法。
過濾器的作用就是為了對于界面中顯示的數(shù)據(jù)進行處理操作。
過濾器可以定義全局或局部。
定義全局過濾器：
<div id="app">
<h3>{{ phone | phoneCrypt }}</h3>
</div>
<script>
// 參數(shù)1：過濾器的名稱，可以隨意起名
// 參數(shù)2：回調(diào)函數(shù)，回調(diào)函數(shù)中的參數(shù)最少要有一個，第1位參數(shù)，永遠指向為要過濾的數(shù)據(jù)
Vue.filter('phoneCrypt', value => {
return value.slice(0, 3) + '~~~~' + value.slice(7)
})
const vm = new Vue({
el: '#app',
data: {
phone: '13523235235'
}
})
</script>
上面的全局過濾器的回調(diào)函數(shù)中只有一個參數(shù)，我們還可以定義多個參數(shù)：
<div id="app">
<!-- 這里傳的第一個參數(shù),對應全局過濾器的回調(diào)函數(shù)中定義的第二個參數(shù) -->
<h3>{{ phone | phoneCrypt('!!!!') }}</h3>
</div>
<script>
Vue.filter('phoneCrypt', (value, salt = '****') => {
return value.slice(0, 3) + salt + value.slice(7)
})
const vm = new Vue({
el: '#app',
data: {
phone: '13523235235'
}
})
</script>
定義局部過濾器：
<div id="app">
<h3>{{ phone | phoneCrypt('!!!!') }}</h3>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
phone: '13523235235'
},
// 局部過濾器
filters:{
phoneCrypt(value, salt = '****'){
return value.slice(0, 3) + salt + value.slice(7)
}
}
})
</script>
到此這篇關于Vue計算屬性與偵聽器和過濾器超詳細介紹的文章就介紹到這了,更多相關Vue計算屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
路由懶加載是一種優(yōu)化技術，用于延遲加載應用程序中的路由組件，它可以提高初始加載速度并減少資源消耗，特別適用于大型單頁應用，下面我們就來看看它的原理與使用吧2023-08-08
本文主要介紹了Vue全局注冊與局部注冊兩種組件注冊的方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要幫助大家簡單的理解vue中track-by屬性,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
一文快速學會阻止事件冒泡的4種方法(原生js阻止,vue中使用修飾符阻止)
冒泡就是事件開始是由最具體的元素接收,然后逐層向上級傳播到較為不具體的元素,這篇文章主要給大家介紹了關于阻止事件冒泡的4種方法,文中介紹的方法分別是原生js阻止以及vue中使用修飾符阻止的相關資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue從TodoList中學父子組件通信，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
element的el-form和el-table嵌套使用實現(xiàn)
本文主要介紹了element的el-form和el-table嵌套使用實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
在VUE開發(fā)項目的過程中,插槽<slot>是重要的承載分發(fā)內(nèi)容的出口,下面這篇文章主要給大家介紹了關于Vue3插槽(slot)使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
在我們的印象使用中，vue除了寫業(yè)務代碼沒有特別新奇的功能了，今天就來看看如何自動化生成vue組件文檔2021-06-06
這篇文章主要介紹了vue-cli3項目升級到vue-cli4 的方法總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
vue2.0中click點擊當前l(fā)i實現(xiàn)動態(tài)切換class
本篇文章主要介紹了vue2.0中click點擊當前l(fā)i實現(xiàn)動態(tài)切換class ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06