簡(jiǎn)單了解Vue computed屬性及watch區(qū)別
自己的理解:
1. computed用來(lái)監(jiān)控自己定義的變量,該變量不在data里面聲明,直接在computed里面定義,然后就可以在頁(yè)面上進(jìn)行雙向數(shù)據(jù)綁定展示出結(jié)果或者用作其他處理;
2. computed比較適合對(duì)多個(gè)變量或者對(duì)象進(jìn)行處理后返回一個(gè)結(jié)果值,也就是數(shù)多個(gè)變量中的某一個(gè)值發(fā)生了變化則我們監(jiān)控的這個(gè)值也就會(huì)發(fā)生變化,舉例:購(gòu)物車?yán)锩娴纳唐?列表和總金額之間的關(guān)系,只要商品列表里面的商品數(shù)量發(fā)生變化,或減少或增多或刪除商品,總金額都應(yīng)該發(fā)生變化。這里的這個(gè)總金額使用computed屬性來(lái)進(jìn)行計(jì)算是最好 的選擇
與watch之間的區(qū)別:
剛開(kāi)始總是傻傻分不清到底在什么時(shí)候使用watch,什么時(shí)候使用computed。這里大致說(shuō)一下自己的理解:
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輸入框的值特殊處理等等,它比較適合的場(chǎng)景是一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 使用EF Code First搭建簡(jiǎn)易ASP.NET MVC網(wǎng)站并允許數(shù)據(jù)庫(kù)遷移2. 使用PHP實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)可視化功能的示例詳解3. Python從文件中讀取數(shù)據(jù)的方法步驟4. XMLHTTP下載遠(yuǎn)程數(shù)據(jù)輸出到瀏覽器5. PHP擴(kuò)展類型及安裝方式解析6. Python pygame實(shí)現(xiàn)中國(guó)象棋單機(jī)版源碼7. 如何在瀏覽器端加密——使用Javascript加密解密8. PHP對(duì)文本數(shù)據(jù)庫(kù)的基本操作方法9. Vue父組件向子組件傳值以及data和props的區(qū)別詳解10. 基于JavaScript實(shí)現(xiàn)留言板功能
