Vue計算屬性與偵聽器和過濾器超詳細介紹
更新時間：2022年10月03日 10:18:33 作者：月光曬了很涼快
這篇文章主要介紹了Vue計算屬性與偵聽器和過濾器，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1. 計算屬性
1.1 使用方法
概述：
模板中放入太多的邏輯會讓模板過重且難以維護，使用計算屬性可以讓模板變得簡潔易于維護。計算屬性是基于它們的響應(yīng)式依賴進行緩存的，計算屬性比較適合對多個變量或者對象進行處理后返回一個結(jié)果值，也就是數(shù)多個變量中的某一個值發(fā)生了變化則我們監(jiān)控的這個值也就會發(fā)生變化。
計算屬性定義在Vue對象中，通過關(guān)鍵詞computed屬性對象中定義一個個函數(shù)，并返回一個值，使用計算屬性時和data中的數(shù)據(jù)使用方式一致。
使用：
當不使用計算屬性時，我們想要計算模板中的結(jié)果，可以有下面幾種寫法：
<div id="app">
<!-- 方法1：vue在使用時，不推薦在模板中來寫過多的邏輯 -->
<h3>{{ n1+n2 }}</h3>
<!-- 方法2：對于一個計算結(jié)果，可能在當前的頁面中，顯示多個，顯示幾次就調(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>
如果對于一個結(jié)果，進行計算，可以使用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學(xué)習(xí)使用</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ù),對應(yīng)全局過濾器的回調(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>
到此這篇關(guān)于Vue計算屬性與偵聽器和過濾器超詳細介紹的文章就介紹到這了,更多相關(guān)Vue計算屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇Vue引用Swiper4插件無法重寫分頁器樣式的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue + element ui實現(xiàn)播放器功能的實例代碼
這篇文章主要介紹了vue + element ui實現(xiàn)播放器功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
Vue中的@blur事件 當元素失去焦點時所觸發(fā)的事件問題
這篇文章主要介紹了Vue中的@blur事件 當元素失去焦點時所觸發(fā)的事件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue組件的使用不管是在平常工作還是在面試面試中,都是頻繁出現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于Vue中常見的幾種傳參方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
vue3?組件與API直接使用的方法詳解(無需import)
這篇文章主要介紹了vue3?組件與API直接使用的方法(無需import)，主要包括vue3自動導(dǎo)入和API的自動引入問題，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue3中setup語法糖下通用的分頁插件,實例代碼介紹了自定義分頁插件：PagePlugin.vue，文中提到了vue3中setup語法糖下父子組件之間的通信，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue3?入口文件createApp函數(shù),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
Element-UI el-calendar樣式如何修改日歷
這篇文章主要介紹了Element-UI el-calendar樣式如何修改日歷問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue3.0中給自己添加一個vue.config.js配置文件
這篇文章主要介紹了vue3.0中給自己添加一個vue.config.js配置文件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue.js使用computed屬性實現(xiàn)數(shù)據(jù)自動更新
在Vue組件中,computed屬性是在組件的選項對象中聲明的,你可以把它們想象成組件的一個小功能,告訴Vue當某些數(shù)據(jù)變化時,如何更新界面,本文給大家介紹了Vue.js使用computed屬性實現(xiàn)數(shù)據(jù)自動更新,需要的朋友可以參考下2024-06-06