Vue 計算屬性與方法

雲崖先生發表於2020-11-20

computed

基本使用

   如果資料需要有複雜的計算,則可以在Vue例項中定義計算屬性,再交由mustache進行渲染。

  1. computed內部其實是通過getttr實現的,所以不用加括號即可完成其下方法的呼叫
  2. computed物件內部的方法如果想呼叫同一Vue例項下的方法或者屬性,可使用this進行呼叫,Vue內部會通過代理器進行查詢

   如下所示,我們需要計算書籍的總價格:

<div id="app">
    書籍的總價格是:{{totalPrice}}
</div>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            books: {
                "Vue實戰": 128,
                "JavaScrip入門": 99,
                "HTML5初識": 87,
                "CSS3": 68,
            }
        },
        computed: {
            totalPrice() {
                return Object.values(this.books).reduce((pre, cur) => {
                    return pre + cur;
                }, 0)
            }
        }
    })
</script>

計算特性

   如果修改了資料來源,那麼計算屬性會重新進行計算,如下所示,書籍總價本來為382,當我們修改其中任意一本書的價格後,書籍總價格也將發生改變:

  

   computed

methods

基本使用

   methods中定義的方法通常都是搭配事件監聽做回撥的,雖然我們也可以讓它計算書籍的總價格,但這並不是一個明智的選擇:

  1. methods下所定義的方法必須加括號才能完成呼叫
  2. methods物件內部的方法如果想呼叫同一Vue例項下的方法或者屬性,可使用this進行呼叫,Vue內部會通過代理器進行查詢

  

   如下例項,用methods也可以完成書籍總價格的計算,同時它也用於computed的計算特性:

   methods

<body>
<div id="app">
    書籍的總價格是:{{totalPrice()}}
</div>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            books: {
                "Vue實戰": 128,
                "JavaScrip入門": 99,
                "HTML5初識": 87,
                "CSS3": 68,
            }
        },
        computed: {

        },
        methods:{
            totalPrice() {
                return Object.values(this.books).reduce((pre, cur) => {
                    return pre + cur;
                }, 0)
            }
        }
    })
</script>
</body>

差異區別

快取特性

   computed具有快取特性,即多次呼叫只會呼叫一次,只有當資料來源發生改變時才會自行呼叫一次。

   而methods沒有快取特性,呼叫幾次就執行幾次,並且當資料來源發生改變時也會自動呼叫之前的次數。

   methods與computed差異

<body>
<div id="app">
    {{computedAdd}}
    {{computedAdd}}
    {{computedAdd}}
    <hr>
    {{methodsAdd()}}
    {{methodsAdd()}}
    {{methodsAdd()}}
    <button type="button">檢視各執行幾次</button>
</div>
<script src="./vue.js"></script>
<script>

    let computedCount = 0;
    let methodsCount = 0;

    const app = new Vue({
        el: "#app",
        data: {
            num1: 100,
            num2: 200,
        },
        computed: {
            computedAdd() {
                computedCount++;
                return this.num1 + this.num2;
            }

        },
        methods: {
            methodsAdd() {
                methodsCount++;
                return this.num1 + this.num2;
            }
        }
    })

    document.querySelector("button").addEventListener("click", () => {
        console.log(`computed呼叫了${computedCount}次`);
        console.log(`methods呼叫了${methodsCount}次`);
    },)

</script>
</body>

使用建議

   計算屬性,故名思意,當多個屬性通過大量計算才能得到結果時當使用計算屬性,因為它具有快取特性呼叫次數較少所以效能比使用methods要高。

   你只能呼叫一次計算屬性,剩下的都是被動呼叫。

   方法則是與事件做對應的,所以不應該使用方法來執行對屬性的計算,方法具有主動呼叫的特性,你可以多次進行主動呼叫,當然它也可以自動呼叫。

相關文章