Vue的computed计算属性

简单地用一个例子来举例说明methods属性和computed属性的区别。
在html中：

<div id="app">
        <h1>Computed 计算属性</h1>
        <button @click="a++">Add to A</button>
        <button @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>

在JS：

new Vue({
            el: "#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;
                }
                }

在控制台上打印出的结果是：

会发现还没点击按钮的时候，控制台就会打印
Add to A 和 Add to B，然后点击Add to A，
会发现Add to B也会同时执行，也就是说，一旦
methods里面任意一个方法被执行，其它方法也会同时
一起执行，也就很耗费性能。但是computed就不一样

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

首先会报错,TypeError: addToA is not a function
因为如果你想调用相对应的方法，必须要在methods里面
调用方法，因为computed是计算属性，那么我们就不能
给addToA 和 addToB添加括号了,

<div id="app">
            <h1>Computed 计算属性</h1>
            <button @click="a++">Add to A</button>
            <button @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>

现在分别在控制台点击两个按钮
只会调用自身的函数，不会全部函数一起执行。在大量耗时和进行
搜索的时候回用到计算属性，并不是因为计算属性是优化的，就不用
methods属性了。