快捷導(dǎo)航

關(guān)于Vue中的計(jì)算屬性和監(jiān)聽屬性詳解

更新時(shí)間：2023年05月15日 10:01:54 作者：夏志121

這篇文章主要介紹了關(guān)于Vue中的計(jì)算屬性和監(jiān)聽屬性詳解,Vue.js模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡單運(yùn)算的，在模板內(nèi)放入過長的或復(fù)雜的邏輯時(shí)，會(huì)讓模板過重且難以維護(hù),需要的朋友可以參考下

一、computed計(jì)算屬性

Vue.js模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡單運(yùn)算的，在模板內(nèi)放入過長的或復(fù)雜的邏輯時(shí)，會(huì)讓模板過重且難以維護(hù)。Vue.js框架提倡使用計(jì)算屬性，在一個(gè)計(jì)算屬性可以完成各種復(fù)雜的邏輯，包括邏輯運(yùn)算、函數(shù)調(diào)用等，只要最終返回一個(gè)結(jié)果就可以。在Vue.js框架中，所有計(jì)算屬性都以函數(shù)的形式寫在Vue實(shí)例的computed選項(xiàng)內(nèi)，最終返回計(jì)算后的結(jié)果。

計(jì)算屬性使用示例：

<!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>Document</title>
    <script src="../../vue-2.7.14.js"></script>
</head>
<body>
    <div id="root">
        <p>原字符串：{{msg}}</p>
        <p>反轉(zhuǎn)字符串：{{reverseMsg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                msg: "Hello,computed!",
            },
            computed: {
                //計(jì)算屬性的getter函數(shù)
                reverseMsg: function () {
                    return this.msg.split('').reverse().join('');
                }
            }
        })
    </script>
</body>
</html>

執(zhí)行結(jié)果：

開發(fā)人員可以在模板中像綁定普通屬性一樣綁定計(jì)算屬性，計(jì)算屬性自動(dòng)監(jiān)聽依賴值的變化，當(dāng)其依賴屬性的值發(fā)生變化時(shí)，計(jì)算屬性的值會(huì)自動(dòng)更新，與之相關(guān)的DOM部分也會(huì)同步更新。

（1）計(jì)算屬性的緩存

從Vue.js 0.12.11版本開始，默認(rèn)提供了緩存開關(guān)，可以在計(jì)算屬性對象中指定cache字段來控制釋放開啟緩存，代碼如下：

            computed: {
                //關(guān)閉緩存，默認(rèn)為true
                cache:true,
                //計(jì)算屬性的getter函數(shù)
                reverseMsg: function () {
                    return this.msg.split('').reverse().join('');
                }
            }

上述代碼中，設(shè)置cache為false關(guān)閉緩存之后，每次訪問計(jì)算屬性reverseMsg時(shí)都會(huì)重新執(zhí)行g(shù)etter方法

（2）計(jì)算屬性的setter

每個(gè)計(jì)算屬性都包含一個(gè)getter和setter，上面的例子都是計(jì)算屬性默認(rèn)用法，只是利用了getter來讀取，在開發(fā)人員需要時(shí)，也可以提供一個(gè)setter函數(shù)，手動(dòng)修改計(jì)算屬性就像修改一個(gè)普通屬性那樣，就會(huì)觸發(fā)setter函數(shù)，執(zhí)行一些自定義的操作。

計(jì)算屬性setter示例

<!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>Document</title>
    <script src="../../vue-2.7.14.js"></script>
</head>
<body>
    <div id="root">
        姓名：{{fullName}}
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                firstName: "Emily",
                lastName: "Ford"
            },
            computed: {
                fullName: {
                    get: function () {
                        return this.firstName + " " + this.lastName;
                    },
                    set: function () {
                        var name = newValue.split("");
                        this.firstName = names[0];
                        this.lastName = names[1];
                    }
                }
            }
        })
    </script>
</body>
</html>

執(zhí)行結(jié)果：

絕大多數(shù)情況下，只會(huì)使用默認(rèn)的getter函數(shù)來讀取一個(gè)計(jì)算屬性，在業(yè)務(wù)中很少使用到setter，所以在聲明一個(gè)計(jì)算屬性的時(shí)候，可以直接使用默認(rèn)的寫法，不必將getter和setter都聲明。

二、watch監(jiān)聽屬性

Vue.js中的事件處理方法可以根據(jù)用戶的需要自定義，能通過單擊事件、焦點(diǎn)事件、鼠標(biāo)事件等觸發(fā)條件來觸發(fā)，但是不能自動(dòng)監(jiān)聽當(dāng)前Vue實(shí)例對象的狀態(tài)變化。為了解決上述問題，Vue.js提供了watch狀態(tài)監(jiān)聽功能，只要監(jiān)聽到當(dāng)前Vue實(shí)例中的數(shù)據(jù)變化，就會(huì)調(diào)用當(dāng)前數(shù)據(jù)所綁定的事件處理方法。

wathch監(jiān)聽屬性的示例：

<!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>Document</title>
    <script src="../../vue-2.7.14.js"></script>
</head>
<body>
    <div id="root">
        千米：<input type="text" v-model="kilometers">
        米：<input type="text" v-model="meters">
        <p id="info"></p>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                kilometers: 0,
                meters: 0,
            },
            watch: {
                //監(jiān)聽kilometers數(shù)據(jù)
                kilometers: function (val) {
                    this.kilometers = val;
                    this.meters = this.kilometers * 1000;
                },
                //監(jiān)聽meters數(shù)據(jù)
                meters: function (val) {
                    this.meters = val;
                    this.kilometers = val / 1000;
                }
            }
        });
        //$watch是Vue.js的API提供的一個(gè)方法，用來監(jiān)聽變量的數(shù)據(jù)變化
        vm.$watch("kilometers", function (newVal, oldVal) {
            document.getElementById("info").innerHTML = "修改前：" + oldVal + ", 修改后：" + newVal;
        })
    </script>
</body>
</html>

執(zhí)行結(jié)果：

上述代碼中，通過data數(shù)據(jù)選項(xiàng)定義了kilometers和meters數(shù)據(jù)，并使用v-model進(jìn)行雙向數(shù)據(jù)綁定，通過watch選項(xiàng)定義了監(jiān)聽器，監(jiān)聽當(dāng)前Vue實(shí)例中kilometerhe和meters數(shù)據(jù)的變化

雖然大多數(shù)情況計(jì)算屬性都可以滿足需要，但有時(shí)還是需要使用監(jiān)聽屬性。當(dāng)需要在數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行異步操作或開銷較大的操作時(shí)，就需要使用監(jiān)聽屬性

computed與watch有什么區(qū)別？

（1）computed：監(jiān)測的是依賴值，在依賴值不變的情況下其會(huì)讀取緩存進(jìn)行復(fù)用，在變化的情況下才會(huì)重新計(jì)算；computed是同步的；computed中的函數(shù)都是帶返回值的。

（2）watch：監(jiān)測的是屬性值，只要屬性值發(fā)生變化，其都會(huì)觸發(fā)執(zhí)行回調(diào)函數(shù)來執(zhí)行一系列操作；watch可以實(shí)現(xiàn)異步；watch里面的函數(shù)可以不寫返回值

簡單來說，computed能做的，watch都能做，反之則不行。

到此這篇關(guān)于關(guān)于Vue中的計(jì)算屬性和監(jiān)聽屬性詳解的文章就介紹到這了,更多相關(guān)Vue的計(jì)算屬性和監(jiān)聽屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: