computed 和 method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
//直接在模板中綁定表達式
<p>{{message.split('').reverse().join('')}}</p>
//運用計算屬性
<p>{{reverseMessage}}</p>
//運用methods方式
<p>{{methodMessage()}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
},
methods:{
methodMessage:function () {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
在此將三種方式進行了比較。返回的結果是一樣的蔑匣，寫但在法上computed計算屬性的方式在用屬性時不用加(),而methods方式在使用時要像方法一樣去用蒿往，必須加().
兩種方式在緩存上也大有不同盛垦，利用computed計算屬性是將 reverseMessage與message綁定，只有當message發(fā)生變化時才會觸發(fā)reverseMessage瓤漏，而methods方式是每次進入頁面都要執(zhí)行該方法腾夯，但是在利用實時信息時颊埃，比如顯示當前進入頁面的時間，必須用methods方式
計算屬性是計算屬性（computed）蝶俱，觀察是觀察( watch )班利。
計算屬性顧名思義就是通過其他變量計算得來的另一個屬性，fullName在它所依賴firstName榨呆，lastName這兩個變量變化時重新計算自己的值罗标。
另外，計算屬性具有緩存积蜻。計算屬性是基于它們的依賴進行緩存的闯割。計算屬性只有在它的相關依賴發(fā)生改變時才會重新求值。這就意味著只要 lastName和firstName都沒有發(fā)生改變浅侨，多次訪問 fullName計算屬性會立即返回之前的計算結果纽谒，而不必再次執(zhí)行函數(shù)。
而觀察watch是觀察一個特定的值如输，當該值變化時執(zhí)行特定的函數(shù)鼓黔。例如分頁組件中，我們可以檢測頁碼執(zhí)行獲取數(shù)據(jù)的函數(shù)不见。
filter
image.png
