計算屬性：watch和computed的區別
computed：是一個計算屬性具有依賴性只執行一次就拿出來呼叫下一次獲取computed的值時才會重新計算 ，
watch：當一條資料影響多條資料的時候就要用watch，
下面展示一些 行內代碼片，
new Vue({
data: {
n: 0,
obj: {
a: "a"
}
},
template: `
<div>
<button @click="n += 1">n+1</button>
<button @click="obj.a += 'hi'">obj.a + 'hi'</button>
<button @click="obj = {a:'a'}">obj = 新物件</button>
</div>
`,
watch: {
n() {
console.log("n 變了");
},
obj:{
handler: function (val, oldVal) {
console.log("obj 變了")
},
deep: true // 該屬性設定在任何被偵聽的物件的 property 改變時都要執行 handler 的回呼，不論其被嵌套多深
},
"obj.a":{
handler: function (val, oldVal) {
console.log("obj.a 變了")
},
immediate: true // 該屬性設定該回呼將會在偵聽開始之后被立即呼叫
}
}
}).$mount("#app");
注意：不應該使用箭頭函式來定義watcher函式，因為箭頭函式沒有this，因為他的this會繼承它的父，
vm.$watch() 的用法和 watch 回呼類似
下面展示一些 行內代碼片，
vm.$watch('data屬性名', fn, {deep: .., immediate: ..})
vm.$watch("n", function(val, newVal){
console.log("n 變了");
},{deep: true, immediate: true})
當我們需要進行數值計算，并且依賴于其它資料時，應該使用 computed，因為可以利用 computed 的快取特性，避免每次獲取值時，都要重新計算；
當我們需要在資料變化時執行異步或開銷較大的操作時，應該使用 watch，使用 watch 選項允許我們執行，
總結：如果一個資料需要經過復雜計算就用 computed
如果一個資料需要被監聽并且對資料做一些操作就用 watch
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/235503.html
標籤：其他
上一篇：vue計算屬性與監視屬性
下一篇：實作圖片的壓縮,上傳功能