computed(计算属性)和methods的区别 使用方式： <!-- 计算属性里方法的调用 --> <div id="app"> 总价： {{ prices }} <br/> test:{{ tests }} </div> <!-- methods里方法的调用 --> <div id="app"> 总价： {{ prices() }} <br/> test:{{ tests() }} </div>
执行机制
methods方法和computed计算属性，两种方式的最终结果确实是完全相同
computed：
computed属性，是一个计算属性，该属性里面的方法名相当于data属性里面的key，他可以作为key值使用，该属性里面的方法必须要有return返回值，这个返回值就是(value值)。computed属性是有依赖缓存的，computed里的方法在初始化执行过后，只要任何值有更新，那么所有在computed计算属性里和其相关的值都会更新。。
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值，多次访问计算属性（取值）会立即返回之前的计算结果，而不必再次执行函数。计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，才会重新求值，
methods：
methods只有在调用的时候才会执行对应的方法，不会自动同步数据。
methods方法，每当触发重新渲染时，调用方法将总会再次执行函数。
总结：
computed计算属性的缓存原理在我们处理大量数据的时候使用可以大大提高效率，不必在数据没有发生改变的时候重新获取数据的值，可直接获取到结果，并且只执行绑定依赖的方法。methods里方法在依赖的值改变后，只有设置触发才会重新执行methods里相关的方法。
使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用 计算属性，除非你不希望得到缓存。
对于任何复杂逻辑，你都应当使用计算属性
例如：
<body>
<div id="app">
{{f}}
<br>
<hr>
{{ff()}}
</div>
<script>
var k = 10;
var app = new Vue({
el: '#app',
data: {
a: 5,
b: 1
},
computed: {
f() {
console.log("f");
return this.a + this.b + k;
}
},
methods: {
ff() {
console.log("ff");
return this.a + this.b + k;
}
}
})
</script>
</body>
结果如下：
我们发现，当我们改变全局变量k的值时，再次调用方法时结果会发生改变，而计算属性的值却并没有发生改变，（因为k并不是Vue实例里data属性的值）