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屬性的值）