這篇文章同樣是一篇筆記，如果想學習更詳細的内容，推薦大家去vue官網
<html>
<head>
<title>vue計算屬性和偵聽器</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--沒有使用計算屬性-->
<p>{{message.split('').reverse().join('')}}</p> <!--模闆内的表達式非常便利，
但是在模闆中放入太多邏輯會讓模闆過重且難以維護
對于複雜邏輯，應當使用計算屬性-->
<!--使用計算屬性-->
<p>reversed message:"{{reversedMessage}}"</p> <!--綁定計算屬性的方式發普通屬性一樣-->
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'hello'
},
//計算屬性
computed:{
//計算屬性的getter
reversedMessage:function(){
return this.message.split('').reverse().join('')
},
//計算屬性預設隻有getter,需要時我們也可以提供一個setter
fullName:{
//getter
get:function(){
return 'hello'
},
//setter
set:function(newValue){
//操作資料
}
}
}
})
//我們也可以将同一函數定義為一個方法而不是一個計算屬性，兩種方式的最終結果是完全相同的
//不同的是，計算屬性是基于他們的響應式依賴進行緩存的
//這意味着隻要message沒有發生改變，多次通路reversedMessage計算屬性會立即傳回之前的計算結果，而不必再次執行函數
//vue提供了一種更通用的方式來觀察和響應vue執行個體上的資料變動：偵聽屬性（watch）
//但是有的時候使用計算屬性比使用偵聽屬性會更簡潔一些
//偵聽器（watch）：
//雖然計算屬性在大多數情況下更适合，但是當需要在資料變化時執行異步或者開銷較大的操作時使用watch來響應資料的變化更合适
</script>
</body>
</html>
![attachEvent 與addEventListener 差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)