五 Vue 計算屬性(computed)與偵聽器(watch)

一、計算屬性(computed)

1、說明

當(dāng)一些數(shù)據(jù)需要根據(jù)其它數(shù)據(jù)變化時,需要進(jìn)行處理才能去展示,雖然vue提供了綁定數(shù)據(jù)表達(dá)式綁定的方式,但是設(shè)計它的初衷只是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護(hù),對于一些比較復(fù)雜和特殊的計算有可能就捉襟見肘了,而且計算的屬性寫在模板里也不利于項目維護(hù)

computed主要的作用:

  • 分離邏輯(模板和數(shù)據(jù)分離)
  • 緩存值
  • 雙向綁定(getter,setter)

2、語法格式

  1. 格式 
    computed:{ [key: string]: Function | { get: Function, set: Function } }
  2. 參數(shù)說明
    • key
      字符串類型
    • 值
      可以是一個方法,如果是方法默認(rèn)是get操作,也可以是對象 ,設(shè)置get屬性或者set屬性

3、基礎(chǔ)用法

  1. 說明
    在一個計算屬性里可以完成各種復(fù)雜的邏輯，包括運算、函數(shù)調(diào)用等，最終返回一個結(jié)果,
    計算屬性還可以依賴多個Vue 實例的數(shù)據(jù)，只要其中任一數(shù)據(jù)變化，計算屬性就會重新執(zhí)行，視圖也會更新,適用于比較費時的數(shù)據(jù)計算
  2. 示例代碼 
    <div id="app">
    <!--使用表達(dá)式的方式-->
    <p v-text="originalPrice - discountPrice"></p>
    <!--使用計算屬性的方式-->
    <p v-text="currentPrice"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
             id:1,
            originalPrice:1200,
            discountPrice:200,
        },
        //計算屬性
        computed: {
            // 把日期換成 常見規(guī)格格式的字符串。
            currentPrice: function () {
                return "當(dāng)前價格:" + (this.originalPrice - this.discountPrice);
            }
        }
    });

4、setter與getter

  1. 說明
    每一個計算屬性都包含一個getter 和一個setter，上面的示例都是計算屬性的默認(rèn)用法， 只是利用了getter來讀取
    如果需要，也可以提供一個setter 函數(shù)， 當(dāng)修改計算屬性的值就像修改一個普通數(shù)據(jù)那樣時，就會觸發(fā)setter 函數(shù)

  2. 示例代碼

    <div id="app1">
    <p v-text="currentPrice"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            id: 1,
            originalPrice: 1200,
            discountPrice: 200,
        },
        //計算屬性
        computed: {
             cache:false,
            // 把日期換成 常見規(guī)格格式的字符串。
            currentPrice: {
                get: function () {
                    return "當(dāng)前價格:" + (this.originalPrice - this.discountPrice);
                },
                // 注意必須要傳遞參數(shù),否則沒有意義
                set: function (value) { 
                    //執(zhí)行自定義的一下操作
                    this.discountPrice = value
                }
            }
        }
    });
</script>
<!-- 
在 console 中 輸入 app.currentPrice=300 
1> 先執(zhí)行g(shù)et方法改變discountPrice的值
2> 因為數(shù)據(jù)發(fā)生改變了 所以會重新計算當(dāng)前的價格, 執(zhí)行g(shù)et方法
-->

  3. 注意
    絕大多數(shù)情況下，我們只會用默認(rèn)的getter方法來讀取一個計算屬性，在業(yè)務(wù)中很少用到setter,所以在聲明一個計算屬性時，可以直接使用默認(rèn)的寫法

5、緩存

  1. 說明
    計算屬性基于它們的依賴進(jìn)行緩存的，只有相關(guān)依賴發(fā)生改變的時候才會重新求值，一般為響應(yīng)式依賴
    什么是響應(yīng)式依賴，Vue 不能檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)

  2. 示例代碼

    <!-- 響應(yīng)式依賴 -->
<script>
    var vm = new Vue({
      data: {
        // 聲明 message 為一個空值字符串
        message: ''
      },
    })
    // 響應(yīng)式
    vm.message = 'Hello!'

    vm.v="非響應(yīng)式的的值"
</script>

    <div id="app">
    <button @click="getMethodsDate">methods</button>
    <button @click="getComputedDate">computed帶緩存</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        methods: {
            getMethodsDate: function () {
                console.log(new Date().toLocaleTimeString())
            },
            // 返回computed選項中設(shè)置的計算屬性——computedDate
            getComputedDate: function () {
                console.log("緩存--->" + this.computedDate)
            }
        },
        computed: {
            computedDate: function () {
                return new Date().toLocaleTimeString()
            }
        }
    })
</script>

6、與methods的區(qū)別

  1. computed`只有符合：存在依賴型數(shù)據(jù)，依賴型數(shù)據(jù)發(fā)生改變這兩個條件，computed才會重新計算。
    而methods下的數(shù)據(jù)，是每次都會進(jìn)行計算的
  2. 調(diào)用方式不一樣，computed定義的成員像屬性一樣訪問，
    而methods定義的成員必須以函數(shù)形式調(diào)用。
  3. computed是帶緩存的，只有其引用的響應(yīng)式屬性發(fā)生改變時才會重新計算，
    而methods里的函數(shù)在每次調(diào)用時都要執(zhí)行。

五、偵聽器(watch)

1、說明

官方:當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的，watch 選項允許我們執(zhí)行異步操作 (訪問一個 API)，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)

watch和我們前面介紹的methods相同的語法，但是有一個關(guān)鍵的區(qū)別。雖然嵌套屬性的值確實是函數(shù)，但鍵的名稱必須對應(yīng)數(shù)據(jù)屬性中的名稱

2、語法格式

watch:{
[key: string]: string | Function | Object }]

3、語法說明

  1. key
    必須是Vue對象中定義的屬性
  2. 值
    • 值可以是一個字符串，這個字符串是方法名
    • 值可以是一個函數(shù)
    • 值也可以是一個對象，其中包含回調(diào)函數(shù)可以其他選項：比如是否深度遍歷。

4、基礎(chǔ)使用

  1. 示例代碼

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        data: {
            test: "111",
            user: {
                name: "碼帝",
                address: {
                    city: "大武漢"
                }
            }
        },
        methods: {
            fun: function (val) {
                alert(val)
            }
        },
        watch: {
            // 方法名方式 對應(yīng) methods中的函數(shù)名
            // test: 'fun',
            // 函數(shù)方式
            test: function (v1, v2) {
                alert("新值" + v1 + "====舊值:" + v2)
            },
            /**
             *什么是深度 例如  data: {test: "111", user: {name: "碼帝" ,address{city:'大武漢'}}
             * user屬性對應(yīng)值就是深層,一次內(nèi)推
             * 如果我們監(jiān)聽的user屬性 當(dāng)user.name屬性發(fā)生改變的時候 watch監(jiān)聽是不到,所有我們這里需要使用深層監(jiān)聽
             */
            //
            user: {
                handler: function (val) {
                    alert(val.name)
                },
                // 是否深度監(jiān)聽 默認(rèn)是false
                // 如果不設(shè)置為true當(dāng)我們手動設(shè)置vm.user.name = "擼帝"的時候,是監(jiān)聽不到的
                deep: true
            },
            /**
             * 或者也可以使用下面的方式來監(jiān)聽
             * 注意鍵值必須是一個字符串，所以用引號括起來
             *
             */

            "user.address.city": function (val) {
                alert(val)
            }
        }
    });
    vm.test = '333';
    vm.user.name = "擼帝";
    vm.user.address.city = '長沙'

    <div id="app">
    <input type="text" v-model="search"/>
    <ul>
        <li v-for="result in results" v-text="result"></li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            user:{
                name:"碼帝",
            }
            search: "",
            results: [],
            
        },
        methods: {
          fun: function () {
            alert("111");
          }
        }
        watch: {
         // 使用函數(shù)
            search: function (v1, v2) {
             console.log('新值: %s, 舊值: %s', v1, v2)
                this.results.push(v1)
            }
        }
        
    })
</script>

5、與computed的區(qū)別

  1. 觸發(fā)條件不同
    • computed計算屬性會依賴于使用它的data屬性，只要是依賴的data屬性值有變動，則自定義重新調(diào)用計算屬性執(zhí)行一次。
    • watch則是在監(jiān)控的data屬性值發(fā)生變動時，其會自動調(diào)用watch回調(diào)函數(shù)。
  2. 應(yīng)用場景不同
    1. 執(zhí)行異步操作，開銷較大的操作，避免堵塞主線程，使用watch。
    2. 簡單且串行返回的，使用computed
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容