1、watch

理解： 監(jiān)聽(tīng)器,監(jiān)聽(tīng)某個(gè)數(shù)據(jù)的變化從而來(lái)執(zhí)行一些操作，當(dāng)data里面的數(shù)據(jù)發(fā)生變化的時(shí)候來(lái)執(zhí)行一下開(kāi)銷較大或異步的操作

1、監(jiān)聽(tīng)值類型(簡(jiǎn)單類型)數(shù)據(jù)

//在一個(gè)vue實(shí)例中
  new Vue({
    el:"#myApp",
    data:{
      num1:1,
      num2:2
    },
    methods:{},
    watch:{
     //這里兩個(gè)屬性，第一個(gè)值是變化后最新的值，第二個(gè)是變化前
      num1(after,before){
        this.num2 = after +1
      }
      immediate:true  //頁(yè)面首次加載的時(shí)候做一次監(jiān)聽(tīng)。
     //這里的意思就是，監(jiān)聽(tīng)num1的變化，當(dāng)num1的數(shù)據(jù)發(fā)生變化的時(shí)候，來(lái)操作num2的值
    }
  })

2、監(jiān)聽(tīng)引用(復(fù)雜)類型的數(shù)據(jù)

 new Vue({
    el:"#myApp",
    data:{
      obj:{
        userName:"caicai"
      }
    },
    watch:{
      obj:{
        handler(newValue,oldValue){
          // handler函數(shù)是當(dāng)你的obj發(fā)生變化的時(shí)候你要做什么          
         console.log(newValue.userName,oldValue.userName);
        },
        deep:true //是否深度偵聽(tīng)，true開(kāi)啟，false關(guān)閉,默認(rèn)false
        //加了deep之后相當(dāng)于在對(duì)象obj每一層的屬性都加上了handler偵聽(tīng)器。否則的話偵聽(tīng)到的只是引用地址，不會(huì)執(zhí)行handler函數(shù)
      }
    }
  });

2、computed

理解： 計(jì)算屬性,顧名思義就是通過(guò)某個(gè)屬性（數(shù)據(jù)）來(lái)計(jì)算得到某個(gè)屬性,這個(gè)重點(diǎn)在于計(jì)算，我們希望的是拿到data數(shù)據(jù)后處理一下，得到計(jì)算的結(jié)果。

在原vue中的template模板，作者初衷只是進(jìn)行一些簡(jiǎn)單的運(yùn)算，那么比較復(fù)雜的計(jì)算就可用computed來(lái)進(jìn)行操作

  <div id="myApp">
    <input type="text" v-model="str">
  1、第一種操作，寫(xiě)在模板里，導(dǎo)致模板過(guò)重，難于維護(hù)
    <p>{{str.split("").reverse().join("")}}</p> 
  2、第二種，使用一個(gè)方法來(lái)調(diào)用，若多處使用，就執(zhí)行多次，降低運(yùn)行速度，性能減少
    <p>{{fn(str)}}</p>
  3、第三種，使用過(guò)濾器，具有緩存，只要str不發(fā)生變化，就不會(huì)再次進(jìn)行運(yùn)算
    <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("")//炸開(kāi)--反轉(zhuǎn)--組合
    }
  },
  computed:{
    reverseStr(){
     //str不發(fā)生變化的話，我只執(zhí)行一次，具有緩存
      return this.str.split("").reverse().join("")
    }
  }
})
</script>

到這里我先略微總結(jié)一下這兩者的區(qū)別，以及使用場(chǎng)景

computed：

1、監(jiān)控自己定義的變量，不用再data里面聲明，函數(shù)名就是變量名

2、適合多個(gè)變量或?qū)ο筮M(jìn)行處理后返回一個(gè)值(結(jié)果)。若這多個(gè)變量發(fā)生只要有一個(gè)發(fā)生變化，結(jié)果都會(huì)變化。

3、計(jì)算的結(jié)果具有緩存,依賴響應(yīng)式屬性變化，響應(yīng)式屬性沒(méi)有變化，直接從緩存中讀取結(jié)果。

4、在內(nèi)部函數(shù)調(diào)用的時(shí)候不用加()。

5、必須用return返回

6、不要在computed 中對(duì)data中的數(shù)據(jù)進(jìn)行賦值操作，這會(huì)形成一個(gè)死循環(huán)。

watch：

1、watch 函數(shù)是不需要調(diào)用的。

2、重點(diǎn)在于監(jiān)控，監(jiān)控?cái)?shù)據(jù)發(fā)生變化的時(shí)候，執(zhí)行回調(diào)函數(shù)操作。

3、當(dāng)我們需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷較大的操作時(shí)，應(yīng)該使用 watch

4、函數(shù)名就是你要監(jiān)聽(tīng)的數(shù)據(jù)名字

使用場(chǎng)景：

computed：

1、一個(gè)需要的結(jié)果受多個(gè)數(shù)據(jù)影響的時(shí)候，比如購(gòu)物車結(jié)算金額(受到很多處的價(jià)格結(jié)算)。

2、操作某個(gè)屬性，執(zhí)行一些復(fù)雜的邏輯，并在多處使用這個(gè)結(jié)果。

3、內(nèi)部函數(shù)中多處要使用到這個(gè)結(jié)果的。

watch ：

1、監(jiān)控一些input框值的特殊處理，適合一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)。

2、數(shù)據(jù)變化時(shí)，執(zhí)行一些異步操作，或開(kāi)銷比較大的操作

3、updated

理解： 是vue生命周期里面的一個(gè)鉤子函數(shù)—data數(shù)據(jù)更新后觸發(fā)視圖更新。這里是視圖更新之后的操作可以在這里執(zhí)行。

觸發(fā)條件：

1、當(dāng)data中定義的數(shù)據(jù)有變化時(shí)就會(huì)加載updated方法。

2、任何數(shù)據(jù)的更新，如果要做統(tǒng)一的業(yè)務(wù)邏輯處理

3、在大多數(shù)情況下，此期間避免更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無(wú)限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

特點(diǎn)：

1.執(zhí)行到它的時(shí)候時(shí)候是數(shù)據(jù)發(fā)生變化且界面更新完畢

2.不能監(jiān)聽(tīng)到路由數(shù)據(jù)(例如網(wǎng)址中的參數(shù))

3.所有的數(shù)據(jù)發(fā)生變化都會(huì)調(diào)用(消耗性能)

4.只要數(shù)據(jù)發(fā)生變化，每次觸發(fā)的代碼都是同一個(gè)

補(bǔ)充知識(shí)：vue中渲染數(shù)據(jù)可能有一個(gè)無(wú)限更新循環(huán)--You may have an infinite update loop in a component render function.

今天在在工作中碰到個(gè)問(wèn)題，在此記錄下。

今天在接接口數(shù)據(jù)時(shí)發(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é)果報(bào)了個(gè)錯(cuò)

找了好久發(fā)現(xiàn)問(wèn)題就在于reverse()這個(gè)方法

vue的響應(yīng)式原理中對(duì)于數(shù)組的更新檢測(cè)包含了一組觀察數(shù)組的編譯方法

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

而我在呈現(xiàn)的數(shù)據(jù)中調(diào)用了reverse()這個(gè)方法，這樣就會(huì)導(dǎo)致無(wú)限的更新循環(huán)。

解決辦法也很簡(jiǎn)單，可以在vue實(shí)例的數(shù)據(jù)對(duì)象賦值之前調(diào)用reverse()就可以了

以上這篇Vue中watch、computed、updated三者的區(qū)別及用法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論