建站
咨詢
售后
建站咨詢
新聞中心
computed與watch在Vue中有什么不同？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。
計(jì)算屬性computed：
支持緩存，只有依賴數(shù)據(jù)發(fā)生改變，才會(huì)重新進(jìn)行計(jì)算
不支持異步，當(dāng)computed內(nèi)有異步操作時(shí)無效，無法監(jiān)聽數(shù)據(jù)的變化
computed 屬性值會(huì)默認(rèn)走緩存，計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，也就是基于data中聲明過或者父組件傳遞的props中的數(shù)據(jù)通過計(jì)算得到的值
如果一個(gè)屬性是由其他屬性計(jì)算而來的，這個(gè)屬性依賴其他屬性，是一個(gè)多對(duì)一或者一對(duì)一，一般用computed
如果computed屬性屬性值是函數(shù)，那么默認(rèn)會(huì)走get方法；函數(shù)的返回值就是屬性的屬性值；在computed中的，屬性都有一個(gè)get和一個(gè)set方法，當(dāng)數(shù)據(jù)變化時(shí)，調(diào)用set方法。
var vm = new Vue({
el: '#app',
data: {
message: 'hello'
},
template: `
我是原始值: "{{ message }}"
我是計(jì)算屬性的值: "{{ computedMessage}}"
// computed 在 DOM 里直接使用不需要調(diào)用 `,
computed: {
// 計(jì)算屬性的 getter computedMessage: function () {
// `this` 指向 vm 實(shí)例 return this.message.split('').reverse().join('')
}
}
})結(jié)果：
我是原始值: "Hello"
我是計(jì)算屬性的值: "olleH"
如果不使用計(jì)算屬性，那么 message.split('').reverse().join('') 就會(huì)直接寫到 template 里，那么在模版中放入太多聲明式的邏輯會(huì)讓模板本身過重，尤其當(dāng)在頁面中使用大量復(fù)雜的邏輯表達(dá)式處理數(shù)據(jù)時(shí)，會(huì)對(duì)頁面的可維護(hù)性造成很大的影響
而且計(jì)算屬性如果依賴不變的話，它就會(huì)變成緩存，computed 的值就不會(huì)重新計(jì)算
所以，如果數(shù)據(jù)要通過復(fù)雜邏輯來得出結(jié)果，那么就推薦使用計(jì)算屬性
偵聽屬性watch
不支持緩存，數(shù)據(jù)變，直接會(huì)觸發(fā)相應(yīng)的操作。
watch支持異步；監(jiān)聽的函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是新的值；第二個(gè)參數(shù)是輸入之前的值；
當(dāng)一個(gè)屬性發(fā)生變化時(shí)，需要執(zhí)行對(duì)應(yīng)的操作；一對(duì)多；
監(jiān)聽數(shù)據(jù)必須是data中聲明過或者父組件傳遞過來的props中的數(shù)據(jù)，當(dāng)數(shù)據(jù)變化時(shí)，觸發(fā)其他操作，函數(shù)有兩個(gè)參數(shù)：
new Vue({
data: {
n: 0,
obj: {
a: "a"
}
},
template: `
n+1 obj.a + 'hi' obj = 新對(duì)象 `,
watch: {
n() {
console.log("n 變了");
},
obj:{
handler: function (val, oldVal) {
console.log("obj 變了")
},
deep: true // 該屬性設(shè)定在任何被偵聽的對(duì)象的 property 改變時(shí)都要執(zhí)行 handler 的回調(diào)，不論其被嵌套多深 },
"obj.a":{
handler: function (val, oldVal) {
console.log("obj.a 變了")
},
immediate: true // 該屬性設(shè)定該回調(diào)將會(huì)在偵聽開始之后被立即調(diào)用 }
}
}).$mount("#app");不應(yīng)該使用箭頭函數(shù)來定義 watcher 函數(shù)，因?yàn)榧^函數(shù)沒有 this，它的 this 會(huì)繼承它的父級(jí)函數(shù)，但是它的父級(jí)函數(shù)是 window，導(dǎo)致箭頭函數(shù)的 this 指向 window，而不是 Vue 實(shí)例
deep 控制是否要看這個(gè)對(duì)象里面的屬性變化
immediate 控制是否在第一次渲染是執(zhí)行這個(gè)函數(shù)
vm.$watch() 的用法和 watch 回調(diào)類似
vm.$watch('data屬性名', fn, {deep: .., immediate: ..})
vm.$watch("n", function(val, newVal){
console.log("n 變了");
},{deep: true, immediate: true})總結(jié)
如果一個(gè)數(shù)據(jù)需要經(jīng)過復(fù)雜計(jì)算就用 computed
如果一個(gè)數(shù)據(jù)需要被監(jiān)聽并且對(duì)數(shù)據(jù)做一些操作就用 watch
關(guān)于computed與watch在Vue中有什么不同問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
標(biāo)題名稱：computed與watch在Vue中有什么不同-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://www.dlmjj.cn/article/dcojoj.html
