溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享的是Vue中Computed和Watch的區別及其用法，相信很多人都不太了解，為了讓大家更加了解Computed和Watch，所以給大家總結了以下內容，一起往下看吧。一定會有所收獲的哦。
一、 計算屬性（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。屬性監聽的是定義的變量，當定義的值發生變化時，執行相對應的函數。
更多相關資訊：
關于Vue中Computed和Watch的區別及其用法就分享到這里了，希望以上內容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
