您好,登錄后才能下訂單哦!
小編這次要給大家分享的是Vue中watch、computed和updated有什么區(qū)別,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
1、watch
理解: 監(jiān)聽器,監(jiān)聽某個數(shù)據(jù)的變化從而來執(zhí)行一些操作,當data里面的數(shù)據(jù)發(fā)生變化的時候來執(zhí)行一下開銷較大或異步的操作
1、監(jiān)聽值類型(簡單類型)數(shù)據(jù)
//在一個vue實例中 new Vue({ el:"#myApp", data:{ num1:1, num2:2 }, methods:{}, watch:{ //這里兩個屬性,第一個值是變化后最新的值,第二個是變化前 num1(after,before){ this.num2 = after +1 } immediate:true //頁面首次加載的時候做一次監(jiān)聽。 //這里的意思就是,監(jiān)聽num1的變化,當num1的數(shù)據(jù)發(fā)生變化的時候,來操作num2的值 } })
2、監(jiān)聽引用(復(fù)雜)類型的數(shù)據(jù)
new Vue({ el:"#myApp", data:{ obj:{ userName:"caicai" } }, watch:{ obj:{ handler(newValue,oldValue){ // handler函數(shù)是當你的obj發(fā)生變化的時候你要做什么 console.log(newValue.userName,oldValue.userName); }, deep:true //是否深度偵聽,true開啟,false關(guān)閉,默認false //加了deep之后相當于在對象obj每一層的屬性都加上了handler偵聽器。否則的話偵聽到的只是引用地址,不會執(zhí)行handler函數(shù) } } });
2、computed
理解: 計算屬性,顧名思義就是通過某個屬性(數(shù)據(jù))來計算得到某個屬性,這個重點在于計算,我們希望的是拿到data數(shù)據(jù)后處理一下,得到計算的結(jié)果。
在原vue中的template模板,作者初衷只是進行一些簡單的運算,那么比較復(fù)雜的計算就可用computed來進行操作
<div id="myApp"> <input type="text" v-model="str"> 1、第一種操作,寫在模板里,導(dǎo)致模板過重,難于維護 <p>{{str.split("").reverse().join("")}}</p> 2、第二種,使用一個方法來調(diào)用,若多處使用,就執(zhí)行多次,降低運行速度,性能減少 <p>{{fn(str)}}</p> 3、第三種,使用過濾器,具有緩存,只要str不發(fā)生變化,就不會再次進行運算 <p>{{reverseStr}}</p> </div> <script type="text/javascript"> new Vue({ el:"#myApp", data:{ str:"abcd" }, methods:{ fn(v){ //若多出調(diào)用,就執(zhí)行多次 return v.split("").reverse().join("")//炸開--反轉(zhuǎn)--組合 } }, computed:{ reverseStr(){ //str不發(fā)生變化的話,我只執(zhí)行一次,具有緩存 return this.str.split("").reverse().join("") } } }) </script>
到這里我先略微總結(jié)一下這兩者的區(qū)別,以及使用場景
computed:
1、監(jiān)控自己定義的變量,不用再data里面聲明,函數(shù)名就是變量名
2、適合多個變量或?qū)ο筮M行處理后返回一個值(結(jié)果)。若這多個變量發(fā)生只要有一個發(fā)生變化,結(jié)果都會變化。
3、計算的結(jié)果具有緩存,依賴響應(yīng)式屬性變化,響應(yīng)式屬性沒有變化,直接從緩存中讀取結(jié)果。
4、在內(nèi)部函數(shù)調(diào)用的時候不用加()。
5、必須用return返回
6、不要在computed 中對data中的數(shù)據(jù)進行賦值操作,這會形成一個死循環(huán)。
watch:
1、watch 函數(shù)是不需要調(diào)用的。
2、重點在于監(jiān)控,監(jiān)控數(shù)據(jù)發(fā)生變化的時候,執(zhí)行回調(diào)函數(shù)操作。
3、當我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,應(yīng)該使用 watch
4、函數(shù)名就是你要監(jiān)聽的數(shù)據(jù)名字
使用場景:
computed:
1、一個需要的結(jié)果受多個數(shù)據(jù)影響的時候,比如購物車結(jié)算金額(受到很多處的價格結(jié)算)。
2、操作某個屬性,執(zhí)行一些復(fù)雜的邏輯,并在多處使用這個結(jié)果。
3、內(nèi)部函數(shù)中多處要使用到這個結(jié)果的。
watch :
1、監(jiān)控一些input框值的特殊處理,適合一個數(shù)據(jù)影響多個數(shù)據(jù)。
2、數(shù)據(jù)變化時,執(zhí)行一些異步操作,或開銷比較大的操作
3、updated
理解: 是vue生命周期里面的一個鉤子函數(shù)—data數(shù)據(jù)更新后觸發(fā)視圖更新。這里是視圖更新之后的操作可以在這里執(zhí)行。
觸發(fā)條件:
1、當data中定義的數(shù)據(jù)有變化時就會加載updated方法。
2、任何數(shù)據(jù)的更新,如果要做統(tǒng)一的業(yè)務(wù)邏輯處理
3、在大多數(shù)情況下,此期間避免更改狀態(tài),因為這可能會導(dǎo)致更新無限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
特點:
1.執(zhí)行到它的時候時候是數(shù)據(jù)發(fā)生變化且界面更新完畢
2.不能監(jiān)聽到路由數(shù)據(jù)(例如網(wǎng)址中的參數(shù))
3.所有的數(shù)據(jù)發(fā)生變化都會調(diào)用(消耗性能)
4.只要數(shù)據(jù)發(fā)生變化,每次觸發(fā)的代碼都是同一個
補充知識:vue中渲染數(shù)據(jù)可能有一個無限更新循環(huán)--You may have an infinite update loop in a component render function.
今天在在工作中碰到個問題,在此記錄下。
今天在接接口數(shù)據(jù)時發(fā)現(xiàn)數(shù)據(jù)搞反了,于是想著把數(shù)據(jù)倒敘一下
<row-list v-if="dataList.rules" :canSelect="!isClose" :dataList="dataList.rules[0].subLotteryRule[0].subLotteryRule.reverse()" @selectRow="selectRow"></row-list>
結(jié)果報了個錯
找了好久發(fā)現(xiàn)問題就在于reverse()這個方法
vue的響應(yīng)式原理中對于數(shù)組的更新檢測包含了一組觀察數(shù)組的編譯方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
而我在呈現(xiàn)的數(shù)據(jù)中調(diào)用了reverse()這個方法,這樣就會導(dǎo)致無限的更新循環(huán)。
解決辦法也很簡單,可以在vue實例的數(shù)據(jù)對象賦值之前調(diào)用reverse()就可以了
看完這篇關(guān)于Vue中watch、computed和updated有什么區(qū)別的文章,如果覺得文章內(nèi)容寫得不錯的話,可以把它分享出去給更多人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。