Vue 計算屬性與方法

時間 2020-11-21

標籤 vue 緩存 app 性能 this 代理 code 對象 blog 事件欄目系統性能简体版

原文原文鏈接

computed

基本使用

　　若是數據須要有複雜的計算，則能夠在Vue實例中定義計算屬性，再交由mustache進行渲染。vue

computed內部實際上是經過getttr實現的，因此不用加括號便可完成其下方法的調用

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，當咱們修改其中任意一本書的價格後，書籍總價格也將發生改變：app

methods

基本使用

　　 methods中定義的方法一般都是搭配事件監聽作回調的，雖然咱們也可讓它計算書籍的總價格，但這並非一個明智的選擇：性能

methods下所定義的方法必須加括號才能完成調用

methods對象內部的方法若是想調用同一Vue實例下的方法或者屬性，可以使用this進行調用，Vue內部會經過代理器進行查找

　　以下實例，用methods也能夠完成書籍總價格的計算，同時它也用於computed的計算特性：this

<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沒有緩存特性，調用幾回就執行幾回，而且當數據源發生改變時也會自動調用以前的次數。code

<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>