Vue計算屬性computed和監(jiān)聽屬性watch的使用解讀
一、computed計算屬性
我們希望一個變量是經(jīng)過某種計算然后輸出而不是直接輸出的時候可以使用到計算屬性，計算屬性是基于它們的響應(yīng)式依賴進行緩存的。只在相關(guān)響應(yīng)式依賴發(fā)生改變時它們才會重新求值。而每次調(diào)用函數(shù)都會導(dǎo)致函數(shù)的重新執(zhí)行。
計算屬性就是拿著Vue實例已有的屬性計算或處理完后返回的一個全新的屬性，所以計算屬性是一個屬性，我們可以在插值語法中直接使用。
<body>
<div id="app">
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
<!-- 直接使用插值語法讀取計算屬性 -->
{{total}}
</div>
<script>
new Vue({
el:"#app",
data:{
a:0,
b:0,
// 計算屬性不能寫在這里
// total:0
},
computed:{
// 重新返回屬性 主要是處理data中需要計算/處理的屬性
// 1.計算屬性完整寫法
// total:{
// // get作用：當(dāng)有人讀取total時，get就會被調(diào)用，且返回值就作為total的值
// // get什么時候調(diào)用？1.初次讀取total時 2.所依賴的數(shù)據(jù)發(fā)生改變時(即a或b發(fā)生改變時)
// get(){
// console.log('get被調(diào)用');
// return this.a + this.b
// },
// // set什么時候調(diào)用？當(dāng)total被修改時
// set(value){
// console.log('set',value);
// }
// }
//--------------------------------------------------
// 2.計算屬性簡寫形式(只考慮讀取get，不考慮修改set時才能簡寫)
total(){
console.log('這是computed');
return this.a + this.b
}
},
})
</script>
</body>
computed和methods的區(qū)別
計算屬性有依賴緩存，如果值沒有發(fā)生變化是不會重新調(diào)用計算屬性；而methods沒有緩存，每次調(diào)用都會重新執(zhí)行/渲染。
<body>
<div id="app">
{{total}}
{{total}}
{{total}}
{{str()}}
{{str()}}
{{str()}}
</div>
<script>
new Vue({
el:"#app",
data:{
a:0,
b:0
},
computed:{
total(){
console.log('這是computed');
return this.a + this.b
}
},
methods:{
str(){
console.log('這是methods');
}
}
})
</script>
</body>
二、watch監(jiān)聽屬性
監(jiān)聽屬性也叫監(jiān)聽器/偵聽器
當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，使用監(jiān)聽器是最有用的。
雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過 watch 選項提供了一個更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的 。
監(jiān)視屬性用來監(jiān)視已經(jīng)存在的屬性，當(dāng)監(jiān)視屬性變化時，回調(diào)函數(shù)自動調(diào)用，進行相關(guān)操作。
監(jiān)視屬性兩種寫法：
（1）在Vue實例的watch配置項中寫
（2）通過vm.$watch()監(jiān)視
<body>
<div id="app">
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
{{total}}
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
a: 0,
b: 0,
total: 0
},
watch: {
// 我們需要監(jiān)聽a和b屬性 (也可以監(jiān)聽計算屬性)
//1.完整寫法
// a: {
// // handler是固定配置
// // handler什么時候調(diào)用？當(dāng)a發(fā)生改變時調(diào)用
// // handler有兩個參數(shù)，一個是修改后的值，一個是修改前的值
// handler(newValue, oldValue) {
// console.log('a被修改了', newValue, oldValue);
// this.total = this.a + this.b
// },
// // 其他配置項
// immediate: true //初始化時讓handler調(diào)用一下
// }
//-------------------------------------------
// 2.簡寫
a(newVal, oldVal) {
console.log(newVal,oldVal,'這是監(jiān)聽器');
this.total = this.a + this.b
},
b() {
this.total = this.a + this.b
}
},
})
// 3.也可以使用vm.$watch(需要監(jiān)聽的屬性,{配置項})實現(xiàn)監(jiān)聽
// vm.$watch('a',{
// handler(newValue,oldValue){
// console.log('a被修改了',newValue,oldValue);
// }
// })
</script>
</body>
深度監(jiān)聽
vue中的watch默認不監(jiān)聽對象內(nèi)部值的改變，我們通過配置deep:true即可實現(xiàn)深度監(jiān)視。
<body>
<div id="app">
<input type="number" v-model="a">
<input type="number" v-model="b">
<input type="text" v-model="obj.name">
</div>
<script>
new Vue({
el: "#app",
data: {
a: 0,
b: 0,
total: 0,
obj: {
name: "zhangsan",
age: 12
}
},
watch: {
// 監(jiān)聽基本數(shù)據(jù)類型
a() {
console.log('a被改變了');
},
b: {
handler() {
console.log('b被改變了');
}
},
// 監(jiān)聽引用數(shù)據(jù)類型
obj: {
// 淺監(jiān)聽
handler(newValue, oldValue) {
console.log(newValue.name, oldValue.name);
},
// 遞歸監(jiān)聽 深度監(jiān)聽
deep: true
}
},
})
</script>
</body>watch 和computed區(qū)別
computed
1、具有緩存性，頁面重新渲染值不變化，計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)
2、計算屬性計算某一個屬性的變化，如果某一個值改變了，計算屬性會監(jiān)聽到進行返回
watch
1、監(jiān)聽值的變化，執(zhí)行異步操作（axios請求）
2、無緩存性，只有當(dāng)當(dāng)前值發(fā)生變化時才會執(zhí)行/響應(yīng)
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了java實現(xiàn)時間與字符串之間轉(zhuǎn)換，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
Jmeter自定義函數(shù)base64加密實現(xiàn)過程解析
這篇文章主要介紹了Jmeter自定義函數(shù)base64加密實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Java 添加、讀取和刪除 Excel 批注的操作方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
向量數(shù)據(jù)庫之如何使用Elasticsearch實現(xiàn)向量數(shù)據(jù)存儲與搜索
這篇文章主要介紹了向量數(shù)據(jù)庫之如何使用Elasticsearch實現(xiàn)向量數(shù)據(jù)存儲與搜索,在向量函數(shù)的計算過程中，會對所有匹配的文檔進行線性掃描，因此，查詢預(yù)計時間會隨著匹配文檔的數(shù)量線性增長，本文給大家講解的非常詳細，需要的朋友參考下吧2023-06-06
SpringBoot整合Mybatis-plus的具體過程使用
這篇文章主要介紹了SpringBoot?整合mybatis+mybatis-plus的步驟,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了response文件流輸出文件名中文不顯示的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
這篇文章主要介紹了Java 反射機制原理與用法,結(jié)合實例形式詳細分析了Java反射機制的相關(guān)概念、原理、基本使用方法及操作注意事項,需要的朋友可以參考下2021-08-08
在Java中從字符串中刪除空格有很多不同的方法，本文主要介紹了java中String字符串刪除空格的七種方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Spring Boot 使用 SLF4J 作為日志門面,Logback 或 Log4j2 作為日志實現(xiàn),日志門面提供統(tǒng)一接口,簡化日志記錄,實現(xiàn)負責(zé)具體功能,Spring Boot 默認使用 SLF4J 和 Logback,可以通過配置文件或注解進行日志記錄和控制,感興趣的朋友一起看看吧2025-01-01
Java實現(xiàn)OTP(動態(tài)口令)服務(wù)
OTP是一種動態(tài)生成的短時有效密碼,用于身份驗證,通常在登錄或執(zhí)行敏感操作時提供額外的安全保障,本文主要介紹了Java實現(xiàn)OTP(動態(tài)口令)服務(wù),感興趣的可以了解一下2025-03-03