本篇文章介紹了vue中的計算屬性computed和監聽屬性watch的區別，希望對學習vue前端框架的同學有幫助！
一、 計算屬性（computed）
1.計算屬性是為了模板中的表達式簡潔，易維護，符合用于簡單運算的設計初衷。
例如：
<p id="app">
{{ myname.substring(0,1).toUpperCase() + myname.substring(1) }}
</p>運算過于復雜，冗長，且不好維護，因此我們對于復雜的運算應該 使用計算屬性的方式去書寫。
因此可改寫為：
<body>
<div id="app">
{{ changewords }} // 渲染 不用寫()
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{},
// 計算屬性
computed:{
changewords(){
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
}
}
})
</script>總結：
1、變量不在 data中定義，而是定義在computed中，寫法跟寫方法一樣，有返回值。函數名直接在頁面模板中渲染，不加小括號 。
2、根據傳入的變量的變化 進行結果的更新。
3、計算屬性基于響應式依賴進行緩存。如其中的任意一個值未發生變化，它調用的就是上一次 計算緩存的數據，因此提高了程序的性能。而methods中每調用一次就會重新計算 一次，為了進行不必要的資源消耗，選擇用計算屬性。
計算屬性模糊查詢的例子：
<body>
<div id="app">
<input type="text" v-model="mytext">
<ul>
<li v-for="data in datalistcom" :key="data">
{{ data }}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{
datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
mytext:''
},
computed:{
datalistcom(){
return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
}
}
})
</script>二、監聽屬性（watch）
上面說到計算屬性的時候 初始化的時候就可以被監聽到并且計算 但是watch是發生改變的時候才會觸發。
當你有一些數據需要隨著其它數據變動而變動時，或者當需要在數據變化時執行異步或開銷較大的操作時，你可以使用 watch。
例子 ：
<body>
<div id="app">
<p>單價：<input type="text" v-model="price"></p>
<p>數量：<input type="text" v-model="number"></p>
<p>計算金額：{{sum}}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
price:100,
number:1,
sum:0
},
//監聽某一個值或者狀態發生變化 變化就會觸發watch
watch:{
// 監聽的參數的名字要一致
price(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
},
number(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
}
}
})
</script>計算屬性 和屬性監聽的區別：
1、計算屬性變量在computed中定義，屬性監聽在data中定義。
2、計算屬性是聲明式的描述一個值依賴了其他值，依賴的值改變后重新計算結果更新DOM。屬性監聽的是定義的變量，當定義的值發生變化時，執行相對應的函數。
