溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下Vue中的計算屬性與監聽屬性怎么用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
計算屬性：可以理解為能夠在里面寫一些計算邏輯的屬性。具有如下的作用：
減少模板中的計算邏輯。
數據緩存。當我們的數據沒有變化的時候，不會再次執行計算的過程。
依賴固定的數據類型（響應式數據），不能是普通的傳入的一個全局數據。
在數據量比較大的時候，計算屬性可以幫助我們提高性能，因為計算屬性只會在數據變化的時候才會計算。
在講解計算屬性之前先來看下面的一個例子：
需求：外賣套餐A每份15元，客戶點了3份，總價打八折，配送費5元，要求在界面顯示總價，代碼如下：
<template>
<div>
<div>您購買了{{info.name}}共{{info.count}}份</div>
<h2>總價：{{info.count*info.price*info.sale+info.freight}}元</h2>
</div>
</template>
<script>
export default {
name:'Test',
data(){
return{
info:{
userId:1,
price:15,
name:'套餐A',
count:3,
sale:0.8,
freight:5
}
}
}
}
</script>界面運行效果：
看了上面的例子，可能有人會問：使用這種方式已經實現了需求，那為什么還要使用計算屬性呢？我們知道，vue中模板內的表達式非常便利，設計的初衷是用于簡單運算的。如果在模板中放入太多的邏輯會讓模板過重而且難以維護，看上面的代碼：
<h2>總價：{{info.count*info.price*info.sale+info.freight}}元</h2>在這段代碼中，模板不在是簡單的聲明式邏輯，而是復雜的邏輯計算，如果想要在多處引用總價的時候，就會難以維護。所以，對于任何復雜的邏輯，都應當使用計算屬性。
看下面使用計算屬性的例子：
<template>
<div>
<h2>計算屬性</h2>
<div>您購買了{{info.name}}共{{info.count}}份</div>
<!--使用計算屬性：和綁定普通屬性一樣-->
<h2>總價：{{totalPrice}}元</h2>
</div>
</template>
<script>
export default {
name:'ComputedDemo',
data(){
return{
info:{
userId:1,
price:15,
name:'套餐A',
count:3,
sale:0.8,
freight:5
}
}
},
computed:{
// 定義計算屬性totalPrice
totalPrice:function(){
return this.info.count*this.info.price*this.info.sale+this.info.freight
}
}
}
</script>界面顯示效果：
注意：計算屬性是一個屬性，不是方法，不能寫在methods中，放在computed屬性里面。
上面計算屬性的寫法也可以使用ES6的寫法：
// 使用ES6寫法
totalPrice(){
return this.info.count*this.info.price*this.info.sale+this.info.freight
}上面的例子除了使用計算屬性，還可以使用方法實現：
<template>
<div>
<h2>計算屬性</h2>
<div>您購買了{{info.name}}共{{info.count}}份</div>
<!--使用計算屬性：和綁定普通屬性一樣-->
<h2>使用計算屬性獲取總價：{{totalPrice}}元</h2>
<h2>使用方法獲取總價：{{getTotalPrice()}}元</h2>
</div>
</template>
<script>
export default {
name:'ComputedDemo',
data(){
return{
info:{
userId:1,
price:15,
name:'套餐A',
count:3,
sale:0.8,
freight:5
}
}
},
computed:{
// 定義計算屬性totalPrice
// totalPrice:function(){
// return this.info.count*this.info.price*this.info.sale+this.info.freight;
// }
// 使用ES6寫法
totalPrice(){
return this.info.count*this.info.price*this.info.sale+this.info.freight;
}
},
methods:{
getTotalPrice(){
return this.info.count*this.info.price*this.info.sale+this.info.freight;
}
}
}
</script>界面顯示效果：
通過上面的例子可以看出：計算屬性和方法實現的最終效果是相同的。那么計算屬性和方法有什么區別呢？計算屬性是基于它們的響應式依賴進行緩存的，只有在響應式依賴發生改變時才會重新求值。這就意味著只要響應式依賴沒有發生改變，多次訪問計算屬性會立即返回之前的計算結果，而不必再次執行計算。相比之下，調用方法總會再次執行函數。總價計算屬性和方法的區別如下：
計算屬性在依賴發生改變時會自動改變，而方法在依賴發生改變時需要觸發才會改變。
計算屬性在依賴發生改變時才會重新計算，而方法在每次調用時都會執行。
看下面的例子：
<template>
<div>
<h2>計算屬性</h2>
<!-- <div>您購買了{{info.name}}共{{info.count}}份</div> -->
<!-- 使用計算屬性：和綁定普通屬性一樣 -->
您購買了<input type="text" v-model="info.name" />
數量<input type="text" v-model="info.count" />
<h2>使用計算屬性獲取總價：{{totalPrice}}元</h2>
<button @click="getTotalPrice">計算屬性</button>
<h2>使用方法獲取總價：{{data}}元</h2>
</div>
</template>
<script>
export default {
name:'ComputedDemo',
data(){
return{
info:{
userId:1,
price:15,
name:'套餐A',
count:3,
sale:0.8,
freight:5
},
data:0
}
},
computed:{
// 定義計算屬性totalPrice
// totalPrice:function(){
// return this.info.count*this.info.price*this.info.sale+this.info.freight;
// }
// 使用ES6寫法
totalPrice(){
console.log('計算屬性');
return this.info.count*this.info.price*this.info.sale+this.info.freight;
}
},
methods:{
getTotalPrice(){
console.log('方法');
this.data= this.info.count*this.info.price*this.info.sale+this.info.freight;
}
}
}
</script>當依賴發生改變時會多次打印“計算屬性”，而方法需要在點擊按鈕的時候才會發生改變。依賴不發生改變時點擊按鈕，也會打印“方法”。如下圖所示：
假如我們有一個性能開銷比較大的計算屬性A，它需要遍歷一個巨大的數組并做大量的計算，然后我們可能有其他的計算屬性依賴于計算屬性A。如果不使用計算屬性，那么將不可避免的多次進行計算，會消耗很大的性能，這種情況下就需要使用計算屬性。
在上面的例子中都是使用的獲取后的計算屬性的值，那么如何修改計算屬性的值呢？看下面的例子：
<template>
<div>
<h2>修改計算屬性</h2>
<h3>num:{{num}}</h3>
<h3>計算屬性num2:{{num2}}</h3>
<button @click="change">改變計算屬性的值</button>
</div>
</template>
<script>
export default {
name:'ComputedDemo2',
data(){
return{
num:100
}
},
computed:{
num2(){
return this.num-10;
}
},
methods:{
change(){
this.num2=60;
}
}
}
</script>效果：
這時會發現直接修改計算屬性的值報錯了，因為不能直接修改計算屬性的值，如果要修改計算屬性的值，需要修改其依賴項的值，看下面的代碼：
<template>
<div>
<h2>修改計算屬性</h2>
<h3>num:{{num}}</h3>
<h3>計算屬性num2:{{num2}}</h3>
<button @click="change">改變計算屬性的值</button>
</div>
</template>
<script>
import { get } from 'http';
export default {
name:'ComputedDemo2',
data(){
return{
num:100
}
},
computed:{
num2:{
// 當計算屬性要修改時先觸發set方法
// 讀取當前計算屬性中的值,get方法可以隱藏，默認進入的是get方法
get:function(){
return this.num-10;
},
set:function(val){
this.num=val;
}
}
},
methods:{
change(){
// 計算屬性不能直接修改
this.num2=60;
}
}
}
</script>修改前的效果：
修改后的效果：
計算屬性的值不能修改，如果要修改計算屬性的值，要通過計算屬性里面的set方法修改其依賴項的值才能修改計算屬性的值。
監聽屬性(watch)是用來監聽data中的數據是否發生變化，一般是監聽data中的某個屬性。
更加靈活、通用的API。
watch中可以執行任何邏輯，如函數節流，Ajax異步獲取數據，甚至操作DOM。
看下面的代碼：
<template>
<div>
<h2>監聽屬性</h2>
姓名：<input type="text" v-model="userName"/>
<h2>{{userName}}</h2>
年齡：<input type="text" v-model="age"/>
<h2>{{age}}</h2>
</div>
</template>
<script>
export default {
name:'watchDemo',
data(){
return{
userName:"abc",
age:23
}
},
methods:{
change(){
}
},
watch:{
// 監聽userName的變化
// 有兩個參數，newValue表示變化后的值，oldValue表示變化前的值
userName:function(newValue,oldValue){
console.log('修改前的值：'+oldValue);
console.log('修改后的值：'+newValue);
},
// 監聽age的變化
age:function(newValue,oldValue){
console.log('修改前的值：'+oldValue);
console.log('修改后的值：'+newValue);
}
}
}
</script>界面效果：
監聽屬性和計算屬性的區別主要有下面幾點：
計算屬性性能更優。一個監聽屬性只能監聽一個屬性的變化，如果要同時監聽多個，就要寫多個監聽屬性，而計算屬性可以同時監聽多個數據的變化。監聽屬性可以獲取改變之前的屬性值。計算屬性能做的，watch都能做，反之則不行。能用計算屬性盡量用計算屬性。
需求：userName或age改變的時候打印出當前的userName和age值。
用監聽屬性實現：
<template>
<div>
<h2>監聽屬性</h2>
姓名：<input type="text" v-model="userName"/>
<h2>{{userName}}</h2>
年齡：<input type="text" v-model="age"/>
<h2>{{age}}</h2>
<!--打印userName和age的值-->
<h2>{{info}}</h2>
</div>
</template>
<script>
export default {
name:'watchDemo',
data(){
return{
userName:"abc",
age:23,
info:''
}
},
methods:{
change(){
}
},
watch:{
// 監聽userName的變化
// 有兩個參數，newValue表示變化后的值，oldValue表示變化前的值
userName:function(newValue,oldValue){
// console.log('修改前的值：'+oldValue);
// console.log('修改后的值：'+newValue);
this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
},
// 監聽age的變化
age:function(newValue,oldValue){
// console.log('修改前的值：'+oldValue);
// console.log('修改后的值：'+newValue);
this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
}
}
}
</script>如果要實現上述的需求，則需要對userName和age都進行監聽，監聽屬性里面的代碼都是重復的，如果有多個，那么就要寫多個監聽屬性。在看計算屬性：
<template>
<div>
<h2>監聽屬性</h2>
姓名：<input type="text" v-model="userName"/>
<h2>{{userName}}</h2>
年齡：<input type="text" v-model="age"/>
<h2>{{age}}</h2>
<!--打印userName和age的值-->
<!-- <h2>{{info}}</h2> -->
<!--使用計算屬性-->
<h2>{{getUserInfo}}</h2>
</div>
</template>
<script>
export default {
name:'watchDemo',
data(){
return{
userName:"abc",
age:23,
info:''
}
},
methods:{
change(){
}
},
// watch:{
// // 監聽userName的變化
// // 有兩個參數，newValue表示變化后的值，oldValue表示變化前的值
// userName:function(newValue,oldValue){
// // console.log('修改前的值：'+oldValue);
// // console.log('修改后的值：'+newValue);
// this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
// },
// // 監聽age的變化
// age:function(newValue,oldValue){
// // console.log('修改前的值：'+oldValue);
// // console.log('修改后的值：'+newValue);
// this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
// }
// }
computed:{
getUserInfo(){
return '我的姓名:'+ this.userName+',年齡:'+this.age;
}
}
}
</script>如果使用計算屬性則只需要寫一次就可以實現上面的需求了。
上面的例子中是監聽的普通屬性，那么如何監聽對象里面的屬性呢？看下面的代碼：
<template>
<div>
<h2>監聽屬性</h2>
姓名：<input type="text" v-model="userName"/>
<h2>{{userName}}</h2>
年齡：<input type="text" v-model="age"/>
<h2>{{age}}</h2>
<!--打印userName和age的值-->
<!-- <h2>{{info}}</h2> -->
<!--使用計算屬性-->
<h2>{{getUserInfo}}</h2>
<!--監聽對象屬性-->
<h2>監聽對象屬性</h2>
姓名：<input type="text" v-model="obj.name"/>
<h2>{{obj.name}}</h2>
</div>
</template>
<script>
export default {
name:'watchDemo',
data(){
return{
userName:"abc",
age:23,
info:'',
// 對象
obj:{
name:'123'
}
}
},
methods:{
change(){
}
},
watch:{
// 監聽userName的變化
// 有兩個參數，newValue表示變化后的值，oldValue表示變化前的值
userName:function(newValue,oldValue){
// console.log('修改前的值：'+oldValue);
// console.log('修改后的值：'+newValue);
this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
},
// 監聽age的變化
age:function(newValue,oldValue){
// console.log('修改前的值：'+oldValue);
// console.log('修改后的值：'+newValue);
this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
},
// 監聽對象中屬性的變化
'obj.name':function(newValue,oldValue){
console.log('修改前的值：'+oldValue);
console.log('修改后的值：'+newValue);
}
},
computed:{
getUserInfo(){
return '我的姓名:'+ this.userName+',年齡:'+this.age;
}
}
}
</script>效果：
能不能執行監聽對象呢？答案是可以的，看下面代碼：
<template>
<div>
<h2>監聽屬性</h2>
姓名：<input type="text" v-model="userName"/>
<h2>{{userName}}</h2>
年齡：<input type="text" v-model="age"/>
<h2>{{age}}</h2>
<!--打印userName和age的值-->
<!-- <h2>{{info}}</h2> -->
<!--使用計算屬性-->
<h2>{{getUserInfo}}</h2>
<!--監聽對象屬性-->
<h2>監聽對象屬性</h2>
姓名：<input type="text" v-model="obj.name"/>
<h2>{{obj.name}}</h2>
<!--監聽對象-->
<h2>監聽對象</h2>
姓名：<input type="text" v-model="obj.name"/>
<h2>{{obj.name}}</h2>
</div>
</template>
<script>
export default {
name:'watchDemo',
data(){
return{
userName:"abc",
age:23,
info:'',
// 對象
obj:{
name:'123'
}
}
},
methods:{
change(){
}
},
watch:{
// 監聽userName的變化
// 有兩個參數，newValue表示變化后的值，oldValue表示變化前的值
userName:function(newValue,oldValue){
// console.log('修改前的值：'+oldValue);
// console.log('修改后的值：'+newValue);
this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
},
// 監聽age的變化
age:function(newValue,oldValue){
// console.log('修改前的值：'+oldValue);
// console.log('修改后的值：'+newValue);
this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
},
// 監聽對象中屬性的變化
// 'obj.name':function(newValue,oldValue){
// console.log('修改前的值：'+oldValue);
// console.log('修改后的值：'+newValue);
// }
// 直接監聽對象
obj:{
// handler表示默認執行的函數
handler(newValue,oldValue){
console.log('修改前的值：')
console.log(oldValue);
console.log('修改后的值：');
console.log(newValue);
},
// 表示深度監聽
// true：表示handler函數會執行
// false：表示handler函數不會執行
deep:true
}
},
computed:{
getUserInfo(){
return '我的姓名:'+ this.userName+',年齡:'+this.age;
}
}
}
</script>效果：
以上就是“Vue中的計算屬性與監聽屬性怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
