Vue2.0 探索之路——计算属性缓存与methods的区别

计算属性Computed与method有相同的属性，稍微不太好理解。

一、属性对比

属性	页面重新渲染	适用场景
computed	不变化	较大量的计算和改变频率较低的属性
methods	页面元素的data变化	无缓存

二、Demo

methods样例

<!DOCTYPE html>
<html lang="en">
<head>  
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="vue-app">
        <h1> Computed 计算属性 </h1>
        <button v-on:click="a++">Add to A</button>
        <button v-on:click="b++">Add to B</button>
        <p>A - {{a}}</p>
        <p>B - {{b}}</p>
        <p>Age + A ={{addToA()}}</p>
        <p>Age + B ={{addToB()}}</p>
    </div>

    <script src="app.js"></script>
</body>
</html>

new Vue({
    el:"#vue-app",
    data:{
        a:0,
        b:0,
        age:20
    },
    methods:{
        addToA:function(){
            console.log("Add to A");
            return this.a + this.age;
        },
        addToB:function(){
            console.log("Add to B");
            return this.b + this.age;   
        }
    }
});

这里写图片描述

发生重新渲染，method调用总会执行该函数。所以，每次点击按钮触发时间，不论是add to A还是add to B按钮，都会触发methods方法。
在method的每一次点击会触发所有方法，每一次都会渲染DOM结构

computed属性样例

计算属性不能在方法中加入()，计算属性更加优化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="vue-app">
        <h1> Computed 计算属性 </h1>
        <button v-on:click="a++">Add to A</button>
        <button v-on:click="b++">Add to B</button>
        <p>A - {{a}}</p>
        <p>B - {{b}}</p>
        <p>Age + A ={{addToA}}</p>
        <p>Age + B ={{addToB}}</p>
    </div>

    <script src="app.js"></script>
</body>
</html>

new Vue({
    el:"#vue-app",
    data:{
        a:0,
        b:0,
        age:20
    },
    computed:{
        addToA:function(){
            console.log("Add to A");
            return this.a + this.age;
        },
        addToB:function(){
            console.log("Add to B");
            return this.b + this.age;   
        } 
    }
});

computed只在msg更新时计算，计算结果存在缓存中。
所以点击Add to A按钮，只调用addToA方法。

三、总结

Vue使用的是虚拟DOM，当与真实DOM结构不同是才会触发相应方法，method每次都会执行，每点击一个都会执行所有方法。
计算属性只有在相关依赖发生改变时才会重新求值，当页面重新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用。在相关依赖发生改变时才会重新求值。