Vue 計算屬性與方法

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

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要高。

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

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

相關文章