關於vue中計算屬性computed的詳細講解

Posted on by

1.定義

computed是vue的計算屬性，是根據依賴關系進行緩存的計算，隻有在它的相關依賴發生改變時才會進行更新

2.用法

一般情況下，computed默認使用的是getter屬性

3.computed的響應式依賴(緩存)

1. computed的每一個計算屬性都會被緩存起來，隻要計算屬性所依賴的屬性發生變化，計算屬性就會重新執行，視圖也會更新。下面代碼中，計算屬性fullName，它依賴瞭firstName和lastName這兩個屬性，隻要它們其中一個屬性變化，fullName就會重新執行。

2.computed計算屬性會被緩存，在下面代碼中使用瞭兩次fullName，但在控制臺隻輸出瞭一次 “這是fullName”。

<template>
  <div>
    <div>
      姓：<input type="text" v-model="firstName" />
    </div>
    <div>
      名：<input type="text" v-model="lastName" />
    </div>
    <!-- 調用兩次fullName -->
    <div>姓名：{{ fullName }}</div>
    <div>姓名：{{ fullName }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "張",
      lastName: "三",
    };
  },
  computed: {
    fullName() {
        console.log("這是fullName");
        return this.firstName + this.lastName;
    }
  }
};
</script>

4.應用場景

當一個數據受多個數據影響時，可以使用computed

1.本組件計算

2.計算props的值

3.計算vuex的state或者getters值的變化

附：計算屬性的 getter 與 setter

默認情況下，計算屬性函數是一個 getter 函數，如果計算屬性隻有 get 需求，則可以簡寫

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <!-- <input type="checkbox" v-model='isAll'> -->
            <input type="text" v-model='n'>
            +
            <input type="text" v-model='m'>
            =
            <input type="text" v-model='x'>
        </div>
        {{o}}
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                is: true,
                obj: {
                    // a: 1
                    a: 1
                },
                n: '',
                m: ''
            },
            computed: {
                //計算屬性在這裡寫的屬性不要在data重復寫 跟data中的數據一樣可以通過vm.獲取或者修改
                isAll: {
                    get() {
                        //隻要獲取這個屬性就會觸發get這個函數
                        console.log(1);
                        return this.is
                    },
                    set(val) {
                        // val 設置的值
                        this.isAll = this.is
                    }
                },
                x: {
                    // 隻要是依賴的值（必須有setter和getter響應的數據）發生改變瞭就會重新計算自己的值
                    get() {
                        return Number(this.n) + Number(this.m)
                    },
                    // set(){
                    //     Number(this.n) + Number(this.m)
                    // }

                },
                o: {
                    get() {
                        //如果沒有在data的obj中初始化 就沒有getter和setter響應 當改變this.obj.a的時候不會影響 數據o
                        return this.obj.a + 1
                    }
                },
                ss: {
                    get() { },
                    //計算屬性必須要有get可以沒有set
                    //v-model綁定的計算屬性有get和set
                    //其他的一般隻有get
                    set() { }
                },
                xx() {
                    //如果這個計算屬性隻有get可以寫成一個函數的形式
                },
                bb() {
                    //第一次獲取的時候依賴值沒有發生改變但是也會默認執行一次
                    // 必須要有return  不支持異步
                    let a = 'kk';
                    setTimeout(() => {
                        a = this.aa + a
                    }, 1000)
                    console.log(a);
                    
                    return this.aa
                }
            }
        })
    </script>
</body>

</html>

參考：https://cn.vuejs.org/v2/guide/computed.html

           https://segmentfault.com/a/110000012948175

總結

到此這篇關於vue中計算屬性computed的詳細講解的文章就介紹到這瞭,更多相關vue計算屬性computed內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：