Vue 裏 computed 和 watch 的區別

computed

計算屬性 , computed 是用來計算出一個值,這個值在調用的時候會根據依賴的數據顯示新的計算結果並自動緩存。 若是依賴不變,computed中的值就不會從新計算。 注意 :不須要加(),javascript

什麼是計算屬性,爲何要使用它

模板內的表達式很是便利,可是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板太重且難以維護,例如:html

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>
複製代碼

在這個地方,模板再也不是簡單的聲明式邏輯,你必須看一段時間才能意識到,這裏是想要顯示變量 message 的翻轉字符串,當你想要在模板中屢次引用此處的翻轉字符串時,就會更加難以處理。vue

  • 使用 方法 methods
  • 使用 計算屬性 compute

計算屬性和方法的區別

  • 計算屬性是基於他們的響應式依賴進行緩存的,只在相關響應式依賴發生改變時,纔會從新求值(也就是說,計算屬性會把數據進行緩存)
  • 而方法不會把數據進行緩存, 因此用計算屬性效率會更高點

因此,對於任何複雜邏輯,都應該使用計算屬性java

  • 在某些狀況,咱們可能須要對數據進行一些轉化後再顯示,或者須要將多個數據結合起來進行顯示
    • 好比咱們有firstName和lastName兩個變量,咱們須要顯示完整的名稱。
    • 可是若是多個地方都須要顯示完整的名稱,咱們就須要寫多個{{firstName}} {{lastName}}
<body>
 <div id="app"> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <h2>{{getFullName()}}</h2> <h2>{{fullName}}</h2> </div>
</body>
<script src="../js/vue.js"></script>
<script> const app = new Vue({ el: '#app', data: { firstName: 'Lron', lastName: 'Man' }, // 推薦使用計算屬性來操做,由於它會將這些數據進行緩存, 不管打印多少次,它只會調用一次 computed: { // 計算屬性 注意 : 計算的是 屬性,  // 因此這裏面的屬性 當作一個 對象(用名詞形式來表達), 調用時候不用加小括號 fullName: function () { return this.firstName + ' ' + this.lastName } }, methods: { // 不會緩存, 因此有多少次就調用多少次, 沒有 computed 划算 getFullName: function () { return this.firstName + ' ' + this.lastName } } }) </script>
複製代碼

watch

參考文檔:vue官方文檔:watchweb

監聽, 若是某個屬性依賴變化了就執行回調。 它有倆個屬性 1. immediate 表示數據是否在第一次渲染的時候當即執行該函數。 2. deep , 若是咱們監聽一個對象(不包括數組),是否要看對象裏面的屬性的變化。api

什麼是watch 爲何要使用它

watch監聽的數據能夠是一個 字符串、函數、數組、對象數組

一個對象,鍵是須要觀察的表達式(data內的數據),值是對應回調函數。值也能夠是方法名,或者包含選項的對象。緩存

當數據發生改變時,會執行一個回調,它有倆個參數, newVal 和 oldValmarkdown

wtach有倆個屬性:app

  • immediate 是否在第一次渲染時執行這個函數,會在監聽開始以後就當即本調用。
  • deep 是否要看這個對象裏面的屬性變化。

this.$watch 和 watch 用法一致,只不過寫法有些不一樣,這裏不詳細說明

案例:

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: ` <div> <button @click="n += 1">n+1</button> <button @click="obj.a += 'hi'">obj.a + 'hi'</button> <button @click="obj = {a:'a'}">obj = 新對象</button> </div> `,
  watch: {
    n() {
      console.log("n 變了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 變了")
    },
      deep: true // 該屬性設定在任何被偵聽的對象的 property 改變時都要執行 handler 的回調,不論其被嵌套多深
    },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 變了")
    },
      immediate: true // 該屬性設定該回調將會在偵聽開始以後被當即調用
    }
  }
}).$mount("#app");
複製代碼

總結

  1. 若是一個數據須要通過複雜計算就用 computed
  2. 若是一個數據須要在發生變化時作一些操做就用 watch
相關文章
相關標籤/搜索