vue methods，与 computed的区别。

methods 与 computed最大的区别就是，methods的方法只要被用到了，在re-render的过程中，都会被重新执行，但是computed在re-render的过程中，只有它依赖的值发生了变化，才会被重新执行。避免了重复执行。

例子:

<!--我的理解都在注释中，大家可以好好看看注释 -->
<div id="app">
        <!-- 一定是值在模板中被用到了 && 值发生了变化，才会re-render -->
        <p>{{nameComputed}}</p>
        <p>{{nameMethods()}}</p>
        <p>{{count}}</p>
        <button @click="changeCount">change</button>
</div>

    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: 'jin',
                lastName: 'D',
                count: 0
            },
            computed: {
                // computed 计算属性的值是会被缓存的，re-render的时候，只有它依赖的值变化了，才会重新计算！！！大大节约了性能。
                nameComputed() {
                    console.log('nameComputed invoked');
                    return this.firstName + this.lastName;
                }
            },
            methods: {
                nameMethods() {
                    console.log('nameMethods invoked');
                    return this.firstName + this.lastName;
                },
                changeCount() {
                    // changeCount 执行了 && 模板中又用到了 count，count变化了 -> 重新re-render -> 重新编译模板 -> 模板里面写的其他方法，逻辑，都会被重新执行，上面刚好用到了 nameMethods这个方法，这个方法被重新执行，重新输出，但是它根本不需要执行，因为 firstName  和 lastName根本没有变化
                    // 上面也用到了 nameComputed，在re-render的时候也会重新执行 nameComputed, 但是 computed计算属性的值是会被缓存的，在re-render的时候，它依赖的 firstName 和 lastName，都是没有变化的，直接拿缓存里面的值了，减少了re-render不必要的计算，提高了性能
					 this.count += 1; 
                    console.log(this.count);
                }
            }
        })
       </script>