Vue中watch、computed和updated有什么區別

小編這次要給大家分享的是Vue中watch、computed和updated有什么區別，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

1、watch

理解： 監聽器,監聽某個數據的變化從而來執行一些操作，當data里面的數據發生變化的時候來執行一下開銷較大或異步的操作

1、監聽值類型(簡單類型)數據

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

2、監聽引用(復雜)類型的數據

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

2、computed

理解： 計算屬性,顧名思義就是通過某個屬性（數據）來計算得到某個屬性,這個重點在于計算，我們希望的是拿到data數據后處理一下，得到計算的結果。

在原vue中的template模板，作者初衷只是進行一些簡單的運算，那么比較復雜的計算就可用computed來進行操作

  <div id="myApp">
    <input type="text" v-model="str">
  1、第一種操作，寫在模板里，導致模板過重，難于維護
    <p>{{str.split("").reverse().join("")}}</p> 
  2、第二種，使用一個方法來調用，若多處使用，就執行多次，降低運行速度，性能減少
    <p>{{fn(str)}}</p>
  3、第三種，使用過濾器，具有緩存，只要str不發生變化，就不會再次進行運算
    <p>{{reverseStr}}</p>
  </div>
<script type="text/javascript">
new Vue({
  el:"#myApp",
  data:{
    str:"abcd"
  },
  methods:{
    fn(v){
     //若多出調用，就執行多次
     return v.split("").reverse().join("")//炸開--反轉--組合
    }
  },
  computed:{
    reverseStr(){
     //str不發生變化的話，我只執行一次，具有緩存
      return this.str.split("").reverse().join("")
    }
  }
})
</script>

到這里我先略微總結一下這兩者的區別，以及使用場景

computed：

1、監控自己定義的變量，不用再data里面聲明，函數名就是變量名

2、適合多個變量或對象進行處理后返回一個值(結果)。若這多個變量發生只要有一個發生變化，結果都會變化。

3、計算的結果具有緩存,依賴響應式屬性變化，響應式屬性沒有變化，直接從緩存中讀取結果。

4、在內部函數調用的時候不用加()。

5、必須用return返回

6、不要在computed 中對data中的數據進行賦值操作，這會形成一個死循環。

watch：

1、watch 函數是不需要調用的。

2、重點在于監控，監控數據發生變化的時候，執行回調函數操作。

3、當我們需要在數據變化時執行異步或開銷較大的操作時，應該使用 watch

4、函數名就是你要監聽的數據名字

使用場景：

computed：

1、一個需要的結果受多個數據影響的時候，比如購物車結算金額(受到很多處的價格結算)。

2、操作某個屬性，執行一些復雜的邏輯，并在多處使用這個結果。

3、內部函數中多處要使用到這個結果的。

watch ：

1、監控一些input框值的特殊處理，適合一個數據影響多個數據。

2、數據變化時，執行一些異步操作，或開銷比較大的操作

3、updated

理解： 是vue生命周期里面的一個鉤子函數—data數據更新后觸發視圖更新。這里是視圖更新之后的操作可以在這里執行。

觸發條件：

1、當data中定義的數據有變化時就會加載updated方法。

2、任何數據的更新，如果要做統一的業務邏輯處理

3、在大多數情況下，此期間避免更改狀態，因為這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用。

特點：

1.執行到它的時候時候是數據發生變化且界面更新完畢

2.不能監聽到路由數據(例如網址中的參數)

3.所有的數據發生變化都會調用(消耗性能)

4.只要數據發生變化，每次觸發的代碼都是同一個

補充知識：vue中渲染數據可能有一個無限更新循環--You may have an infinite update loop in a component render function.

今天在在工作中碰到個問題，在此記錄下。

今天在接接口數據時發現數據搞反了，于是想著把數據倒敘一下

<row-list 
 v-if="dataList.rules" 
 :canSelect="!isClose" 
 :dataList="dataList.rules[0].subLotteryRule[0].subLotteryRule.reverse()" 
 @selectRow="selectRow"></row-list>

結果報了個錯

找了好久發現問題就在于reverse()這個方法

vue的響應式原理中對于數組的更新檢測包含了一組觀察數組的編譯方法

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

而我在呈現的數據中調用了reverse()這個方法，這樣就會導致無限的更新循環。

解決辦法也很簡單，可以在vue實例的數據對象賦值之前調用reverse()就可以了

看完這篇關于Vue中watch、computed和updated有什么區別的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。