簡單了解Vue computed屬性及watch區(qū)別
自己的理解：
1. computed用來監(jiān)控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義，然后就可以在頁面上進(jìn)行雙向數(shù)據(jù)綁定展示出結(jié)果或者用作其他處理；
2. computed比較適合對(duì)多個(gè)變量或者對(duì)象進(jìn)行處理后返回一個(gè)結(jié)果值，也就是數(shù)多個(gè)變量中的某一個(gè)值發(fā)生了變化則我們監(jiān)控的這個(gè)值也就會(huì)發(fā)生變化，舉例：購物車?yán)锩娴纳唐?列表和總金額之間的關(guān)系，只要商品列表里面的商品數(shù)量發(fā)生變化，或減少或增多或刪除商品，總金額都應(yīng)該發(fā)生變化。這里的這個(gè)總金額使用computed屬性來進(jìn)行計(jì)算是最好 的選擇
與watch之間的區(qū)別：
剛開始總是傻傻分不清到底在什么時(shí)候使用watch，什么時(shí)候使用computed。這里大致說一下自己的理解：
watch主要用于監(jiān)控vue實(shí)例的變化，它監(jiān)控的變量當(dāng)然必須在data里面聲明才可以，它可以監(jiān)控一個(gè)變量，也可以是一個(gè)對(duì)象，但是我們不能類似這樣監(jiān)控，比如：
watch:{
goodsList.price(newVal,oldVal){
//監(jiān)控商品列表中是商品價(jià)格
}
}
這樣會(huì)報(bào)錯(cuò)。只能監(jiān)控整個(gè)對(duì)象或單個(gè)變量，如下所示：
data(){
return {
example0:"",
example1:"",
example2:{
inner0:1,
innner1:2
}
}
},
watch:{
example0(newVal,oldVal){//監(jiān)控單個(gè)變量
……
}，example2(newVal,oldVal){//監(jiān)控對(duì)象
……
}，
}
watch一般用于監(jiān)控路由、input輸入框的值特殊處理等等，它比較適合的場景是一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了element表格變化后自動(dòng)刷新的兩種方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家介紹了Storybook?7.0?Beta?Vue3踩坑解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
淺談vue中computed屬性對(duì)data屬性賦值為undefined的原因
本文主要介紹了淺談vue中computed屬性對(duì)data屬性賦值為undefined的原因，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
詳解Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要介紹了Vue、element-ui、axios實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vuex直接修改state、commit和dispatch修改state的用法及區(qū)別說明
這篇文章主要介紹了vuex直接修改state、commit和dispatch修改state的用法及區(qū)別說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)lodop打印功能的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了vue在線動(dòng)態(tài)切換主題色方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue使用$emit傳遞參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue路由傳參的三種方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
插槽(Slot)技術(shù)是一種用于組件化開發(fā)的重要技術(shù),允許我們?cè)诮M件中定義一些占位符,在Vue中,插槽的使用方式可以分為三種：默認(rèn)插槽、具名插槽和作用域插槽,下面我們就來看看這三種方式的具體使用吧2023-09-09