Vue中computed解析&computed与methods有什么区别？

---

一、computed是什么？

computed又叫做计算属性，顾名思义就是计算属性用的，这里的属性指的是data里面的数据。

二、computed怎么写？

computed是写在Vue的对象参数里面的一个属性，它和data平级：

    <div id="app">
        <div>{{nameAndAge}}</div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: 'zs',
                age: 18
            },
            computed: {
                nameAndAge:{
                    
                }
            }
        })
    </script>

在computed中我们可以计算一个属性叫nameAndAge，它是name值和age值中间加个加号组成的字符串，例如这里nameAndAge就是‘zs+18’。

在nameAndAge中有一个get方法，当获取nameAndAge时触发，并将返回值作为nameAndAge的值。

    <div id="app">
        <div>{{nameAndAge}}</div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: 'zs',
                age: 18
            },
            computed: {
                nameAndAge:{
                    get(){
                        console.log('OK');
                        return `${this.name} + ${this.age}`;
                    }
                }
            }
        })
    </script>

PS：这里用到了模板字符串，有不懂的可移步我的另一篇文章：ES6对字符串的扩展&模板字符串

运行后，我们会在网页上看到：

同时控制台输出‘OK’

同时nameAndAge中也有一个set方法，当nameAndAge被修改时调用。
但是一般不用。

---

三、computed简写

因为一般不用set方法，所以nameAndAge里面只有一个get方法，所以我们一般会简写nameAndAge：

    <div id="app">
        <div>{{nameAndAge}}</div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: 'zs',
                age: 18
            },
            computed: {
                nameAndAge() {
                    console.log('OK');
                    return `${this.name} + ${this.age}`;
                }
            }
        })
    </script>

四、computed和methods的区别

computed是计算属性，他返回的值也作为属性存在vm下面，但是和data里面的属性区别的是computed里面的属性是后计算出来的，没有数据代理。

对于数据代理不熟悉的可移步：Vue的data之数据代理

但是methods中的是方法，在插值语法也就是<div>{{nameAndAge}}</div>中的使用我们也可以看出computed中的是作为属性在用，但是如果nameAndAge是methods里面的方法，这里就要这样调用<div>{{nameAndAge()}}</div>。

同时，methods中的方法不保存在缓存中，所以每次刷新或是有任何改变都要重新调用，但是computed存在缓存中，只有其依赖的属性改变时才会调用，例如这里只有name或age改变时才调用nameAndAge。