Vue中的計算屬性與監(jiān)聽屬性

更新時間：2022年03月15日 11:39:16 作者：.NET開發(fā)菜鳥

這篇文章介紹了Vue中的計算屬性與監(jiān)聽屬性，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、為什么要使用計算屬性

什么是計算屬性

計算屬性：可以理解為能夠在里面寫一些計算邏輯的屬性。具有如下的作用：

減少模板中的計算邏輯。
數(shù)據(jù)緩存。當(dāng)我們的數(shù)據(jù)沒有變化的時候，不會再次執(zhí)行計算的過程。
依賴固定的數(shù)據(jù)類型（響應(yīng)式數(shù)據(jù)），不能是普通的傳入的一個全局數(shù)據(jù)。

在數(shù)據(jù)量比較大的時候，計算屬性可以幫助我們提高性能，因為計算屬性只會在數(shù)據(jù)變化的時候才會計算。

在講解計算屬性之前先來看下面的一個例子：

需求：外賣套餐A每份15元，客戶點了3份，總價打八折，配送費5元，要求在界面顯示總價，代碼如下：

<template>
    <div>
        <div>您購買了{{info.name}}共{{info.count}}份</div>
        <h1>總價：{{info.count*info.price*info.sale+info.freight}}元</h1>
    </div>
</template>

<script>
export default {
    name:'Test',
    data(){
        return{
            info:{
                userId:1,
                price:15,
                name:'套餐A',
                count:3,
                sale:0.8,
                freight:5
            }
        }
    }
}
</script>

界面運行效果：

看了上面的例子，可能有人會問：使用這種方式已經(jīng)實現(xiàn)了需求，那為什么還要使用計算屬性呢？我們知道，vue中模板內(nèi)的表達式非常便利，設(shè)計的初衷是用于簡單運算的。如果在模板中放入太多的邏輯會讓模板過重而且難以維護，看上面的代碼：

<h1>總價：{{info.count*info.price*info.sale+info.freight}}元</h1>

在這段代碼中，模板不在是簡單的聲明式邏輯，而是復(fù)雜的邏輯計算，如果想要在多處引用總價的時候，就會難以維護。所以，對于任何復(fù)雜的邏輯，都應(yīng)當(dāng)使用計算屬性。

看下面使用計算屬性的例子：

<template>
    <div>
        <h1>計算屬性</h1>
        <div>您購買了{{info.name}}共{{info.count}}份</div>
        <!--使用計算屬性：和綁定普通屬性一樣-->
        <h1>總價：{{totalPrice}}元</h1>
    </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
}

二、計算屬性和方法的區(qū)別

1、區(qū)別

上面的例子除了使用計算屬性，還可以使用方法實現(xiàn)：

<template>
    <div>
        <h1>計算屬性</h1>
        <div>您購買了{{info.name}}共{{info.count}}份</div>
        <!--使用計算屬性：和綁定普通屬性一樣-->
        <h1>使用計算屬性獲取總價：{{totalPrice}}元</h1>
        <h1>使用方法獲取總價：{{getTotalPrice()}}元</h1>
    </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>

界面顯示效果：

通過上面的例子可以看出：計算屬性和方法實現(xiàn)的最終效果是相同的。那么計算屬性和方法有什么區(qū)別呢？計算屬性是基于它們的響應(yīng)式依賴進行緩存的，只有在響應(yīng)式依賴發(fā)生改變時才會重新求值。這就意味著只要響應(yīng)式依賴沒有發(fā)生改變，多次訪問計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行計算。相比之下，調(diào)用方法總會再次執(zhí)行函數(shù)?？們r計算屬性和方法的區(qū)別如下：

計算屬性在依賴發(fā)生改變時會自動改變，而方法在依賴發(fā)生改變時需要觸發(fā)才會改變。
計算屬性在依賴發(fā)生改變時才會重新計算，而方法在每次調(diào)用時都會執(zhí)行。

看下面的例子：

<template>
    <div>
        <h1>計算屬性</h1>
        <!-- <div>您購買了{{info.name}}共{{info.count}}份</div> -->
        <!-- 使用計算屬性：和綁定普通屬性一樣 -->
        您購買了<input type="text" v-model="info.name" />
        數(shù)量<input type="text" v-model="info.count" />
        
        <h1>使用計算屬性獲取總價：{{totalPrice}}元</h1>
        <button @click="getTotalPrice">計算屬性</button>
        <h1>使用方法獲取總價：{{data}}元</h1>
    </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>

當(dāng)依賴發(fā)生改變時會多次打印“計算屬性”，而方法需要在點擊按鈕的時候才會發(fā)生改變。依賴不發(fā)生改變時點擊按鈕，也會打印“方法”。如下圖所示：

2、計算屬性使用場景

假如我們有一個性能開銷比較大的計算屬性A，它需要遍歷一個巨大的數(shù)組并做大量的計算，然后我們可能有其他的計算屬性依賴于計算屬性A。如果不使用計算屬性，那么將不可避免的多次進行計算，會消耗很大的性能，這種情況下就需要使用計算屬性。

三、修改計算屬性的值

在上面的例子中都是使用的獲取后的計算屬性的值，那么如何修改計算屬性的值呢？看下面的例子：

<template>
    <div>
        <h1>修改計算屬性</h1>
        <h2>num:{{num}}</h2>
        <h2>計算屬性num2:{{num2}}</h2>
        <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>

效果：

這時會發(fā)現(xiàn)直接修改計算屬性的值報錯了，因為不能直接修改計算屬性的值，如果要修改計算屬性的值，需要修改其依賴項的值，看下面的代碼：

<template>
    <div>
        <h1>修改計算屬性</h1>
        <h2>num:{{num}}</h2>
        <h2>計算屬性num2:{{num2}}</h2>
        <button @click="change">改變計算屬性的值</button>
    </div>
</template>

<script>
import { get } from 'http';
export default {
    name:'ComputedDemo2',
    data(){
        return{
            num:100
        }
    },
    computed:{
         num2:{
             // 當(dāng)計算屬性要修改時先觸發(fā)set方法
             // 讀取當(dāng)前計算屬性中的值,get方法可以隱藏，默認進入的是get方法
             get:function(){
                return this.num-10;
             },
             set:function(val){
                 this.num=val;
             }
         }
    },
    methods:{
        change(){
            // 計算屬性不能直接修改
            this.num2=60;
        }
    }
}
</script>

修改前的效果：

修改后的效果：

總結(jié)

計算屬性的值不能修改，如果要修改計算屬性的值，要通過計算屬性里面的set方法修改其依賴項的值才能修改計算屬性的值。

四、監(jiān)聽屬性

監(jiān)聽屬性(watch)是用來監(jiān)聽data中的數(shù)據(jù)是否發(fā)生變化，一般是監(jiān)聽data中的某個屬性。

更加靈活、通用的API。
watch中可以執(zhí)行任何邏輯，如函數(shù)節(jié)流，Ajax異步獲取數(shù)據(jù)，甚至操作DOM。

1、監(jiān)聽普通屬性

看下面的代碼：

<template>
    <div>
        <h1>監(jiān)聽屬性</h1>
        姓名：<input type="text" v-model="userName"/>
        <h1>{{userName}}</h1>
        年齡：<input type="text" v-model="age"/>
        <h1>{{age}}</h1>
    </div>
</template>

<script>
export default {
    name:'watchDemo',
    data(){
        return{
           userName:"abc",
           age:23
        }
    },
    methods:{
        change(){

        }
    },
    watch:{
        // 監(jiān)聽userName的變化
        // 有兩個參數(shù)，newValue表示變化后的值，oldValue表示變化前的值
        userName:function(newValue,oldValue){
            console.log('修改前的值：'+oldValue);
            console.log('修改后的值：'+newValue);
        },
        // 監(jiān)聽age的變化
        age:function(newValue,oldValue){
            console.log('修改前的值：'+oldValue);
            console.log('修改后的值：'+newValue);
        }
    }
}
</script>

界面效果：

2、監(jiān)聽屬性和計算屬性的區(qū)別

監(jiān)聽屬性和計算屬性的區(qū)別主要有下面幾點：

計算屬性性能更優(yōu)。一個監(jiān)聽屬性只能監(jiān)聽一個屬性的變化，如果要同時監(jiān)聽多個，就要寫多個監(jiān)聽屬性，而計算屬性可以同時監(jiān)聽多個數(shù)據(jù)的變化。監(jiān)聽屬性可以獲取改變之前的屬性值。計算屬性能做的，watch都能做，反之則不行。能用計算屬性盡量用計算屬性。

需求：userName或age改變的時候打印出當(dāng)前的userName和age值。

用監(jiān)聽屬性實現(xiàn)：

<template>
    <div>
        <h1>監(jiān)聽屬性</h1>
        姓名：<input type="text" v-model="userName"/>
        <h1>{{userName}}</h1>
        年齡：<input type="text" v-model="age"/>
        <h1>{{age}}</h1>
        <!--打印userName和age的值-->
        <h1>{{info}}</h1>
    </div>
</template>

<script>
export default {
    name:'watchDemo',
    data(){
        return{
           userName:"abc",
           age:23,
           info:''
        }
    },
    methods:{
        change(){

        }
    },
    watch:{
        // 監(jiān)聽userName的變化
        // 有兩個參數(shù)，newValue表示變化后的值，oldValue表示變化前的值
        userName:function(newValue,oldValue){
            // console.log('修改前的值：'+oldValue);
            // console.log('修改后的值：'+newValue);
            this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
        },
        // 監(jiān)聽age的變化
        age:function(newValue,oldValue){
            // console.log('修改前的值：'+oldValue);
            // console.log('修改后的值：'+newValue);
            this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
        }
    }
}
</script>

如果要實現(xiàn)上述的需求，則需要對userName和age都進行監(jiān)聽，監(jiān)聽屬性里面的代碼都是重復(fù)的，如果有多個，那么就要寫多個監(jiān)聽屬性。在看計算屬性：

<template>
    <div>
        <h1>監(jiān)聽屬性</h1>
        姓名：<input type="text" v-model="userName"/>
        <h1>{{userName}}</h1>
        年齡：<input type="text" v-model="age"/>
        <h1>{{age}}</h1>
        <!--打印userName和age的值-->
        <!-- <h1>{{info}}</h1> -->
        <!--使用計算屬性-->
        <h1>{{getUserInfo}}</h1>
    </div>
</template>

<script>
export default {
    name:'watchDemo',
    data(){
        return{
           userName:"abc",
           age:23,
           info:''
        }
    },
    methods:{
        change(){

        }
    },
    // watch:{
    //     // 監(jiān)聽userName的變化
    //     // 有兩個參數(shù)，newValue表示變化后的值，oldValue表示變化前的值
    //     userName:function(newValue,oldValue){
    //         // console.log('修改前的值：'+oldValue);
    //         // console.log('修改后的值：'+newValue);
    //         this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
    //     },
    //     // 監(jiān)聽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>

如果使用計算屬性則只需要寫一次就可以實現(xiàn)上面的需求了。

3、監(jiān)聽復(fù)雜對象

上面的例子中是監(jiān)聽的普通屬性，那么如何監(jiān)聽對象里面的屬性呢？看下面的代碼：

<template>
    <div>
        <h1>監(jiān)聽屬性</h1>
        姓名：<input type="text" v-model="userName"/>
        <h1>{{userName}}</h1>
        年齡：<input type="text" v-model="age"/>
        <h1>{{age}}</h1>
        <!--打印userName和age的值-->
        <!-- <h1>{{info}}</h1> -->
        <!--使用計算屬性-->
        <h1>{{getUserInfo}}</h1>
        <!--監(jiān)聽對象屬性-->
        <h1>監(jiān)聽對象屬性</h1>
        姓名：<input type="text" v-model="obj.name"/>
        <h1>{{obj.name}}</h1>
    </div>
</template>

<script>
export default {
    name:'watchDemo',
    data(){
        return{
           userName:"abc",
           age:23,
           info:'',
           // 對象
           obj:{
               name:'123'
           }
        }
    },
    methods:{
        change(){

        }
    },
    watch:{
        // 監(jiān)聽userName的變化
        // 有兩個參數(shù)，newValue表示變化后的值，oldValue表示變化前的值
        userName:function(newValue,oldValue){
            // console.log('修改前的值：'+oldValue);
            // console.log('修改后的值：'+newValue);
            this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
        },
        // 監(jiān)聽age的變化
        age:function(newValue,oldValue){
            // console.log('修改前的值：'+oldValue);
            // console.log('修改后的值：'+newValue);
            this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
        },
        // 監(jiān)聽對象中屬性的變化
        'obj.name':function(newValue,oldValue){
            console.log('修改前的值：'+oldValue);
            console.log('修改后的值：'+newValue);
        }
    },
    computed:{
        getUserInfo(){
            return '我的姓名:'+ this.userName+',年齡:'+this.age;
        }
    }
}
</script>

效果：

能不能執(zhí)行監(jiān)聽對象呢？答案是可以的，看下面代碼：

<template>
    <div>
        <h1>監(jiān)聽屬性</h1>
        姓名：<input type="text" v-model="userName"/>
        <h1>{{userName}}</h1>
        年齡：<input type="text" v-model="age"/>
        <h1>{{age}}</h1>
        <!--打印userName和age的值-->
        <!-- <h1>{{info}}</h1> -->
        <!--使用計算屬性-->
        <h1>{{getUserInfo}}</h1>
        <!--監(jiān)聽對象屬性-->
        <h1>監(jiān)聽對象屬性</h1>
        姓名：<input type="text" v-model="obj.name"/>
        <h1>{{obj.name}}</h1>
        <!--監(jiān)聽對象-->
        <h1>監(jiān)聽對象</h1>
        姓名：<input type="text" v-model="obj.name"/>
        <h1>{{obj.name}}</h1>
    </div>
</template>

<script>
export default {
    name:'watchDemo',
    data(){
        return{
           userName:"abc",
           age:23,
           info:'',
           // 對象
           obj:{
               name:'123'
           }
        }
    },
    methods:{
        change(){

        }
    },
    watch:{
        // 監(jiān)聽userName的變化
        // 有兩個參數(shù)，newValue表示變化后的值，oldValue表示變化前的值
        userName:function(newValue,oldValue){
            // console.log('修改前的值：'+oldValue);
            // console.log('修改后的值：'+newValue);
            this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
        },
        // 監(jiān)聽age的變化
        age:function(newValue,oldValue){
            // console.log('修改前的值：'+oldValue);
            // console.log('修改后的值：'+newValue);
            this.info= '我的姓名:'+ this.userName+',年齡:'+this.age;
        },
        // 監(jiān)聽對象中屬性的變化
        // 'obj.name':function(newValue,oldValue){
        //     console.log('修改前的值：'+oldValue);
        //     console.log('修改后的值：'+newValue);
        // }
        // 直接監(jiān)聽對象
        obj:{
            // handler表示默認執(zhí)行的函數(shù)
            handler(newValue,oldValue){
                console.log('修改前的值：')
                console.log(oldValue);
                console.log('修改后的值：');
                console.log(newValue);
            },
            // 表示深度監(jiān)聽 
            // true：表示handler函數(shù)會執(zhí)行
            // false：表示handler函數(shù)不會執(zhí)行
            deep:true
        }
    },
    computed:{
        getUserInfo(){
            return '我的姓名:'+ this.userName+',年齡:'+this.age;
        }
    }
}
</script>

效果：

GitHub代碼地址：https://github.com/JiangXiaoLiang1988/computed.git

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

Vue中的計算屬性與監(jiān)聽屬性

目錄

一、為什么要使用計算屬性

什么是計算屬性

二、計算屬性和方法的區(qū)別

1、區(qū)別

2、計算屬性使用場景

三、修改計算屬性的值

總結(jié)

四、監(jiān)聽屬性

1、監(jiān)聽普通屬性

2、監(jiān)聽屬性和計算屬性的區(qū)別

3、監(jiān)聽復(fù)雜對象

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

Vue中的計算屬性與監(jiān)聽屬性

目錄

一、為什么要使用計算屬性

什么是計算屬性

二、計算屬性和方法的區(qū)別

1、區(qū)別

2、計算屬性使用場景

三、修改計算屬性的值

總結(jié)

四、監(jiān)聽屬性

1、監(jiān)聽普通屬性

2、監(jiān)聽屬性和計算屬性的區(qū)別

3、監(jiān)聽復(fù)雜對象

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、為什么要使用計算屬性

1、區(qū)別

2、計算屬性使用場景

三、修改計算屬性的值

1、監(jiān)聽普通屬性

2、監(jiān)聽屬性和計算屬性的區(qū)別

3、監(jiān)聽復(fù)雜對象