首頁 >web前端 >Vue.js >vue計算屬性和watch的差別有哪些？

vue計算屬性和watch的差別有哪些？

青灯夜游原創: 2020-11-19 15:18:2521807瀏覽

區別：1、計算屬性在呼叫時需要在範本中渲染，修改計算所依賴元資料；watch在呼叫時只需修改元資料。 2.計算屬性預設深度依賴，watch預設淺度觀測。 3.計算屬性適合做篩選，不可異步；watch適合做執行異步或開銷較大的操作。

computed

#computed 是計算屬性，它會根據你所依賴的數據動態顯示新的計算結果

計算屬性將會加入Vue 實例中。所有getter 和setter 的this 上下文自動地綁定為Vue 實例

#透過計算出來的屬性不需要呼叫直接可以在DOM 裡使用

#基礎範例

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  },
  template: `
  <div>
  <p>我是原始值: "{{ message }}"</p>
  <p>我是计算属性的值: "{{ computedMessage}}"</p> // computed 在 DOM 里直接使用不需要调用
  </div>
  `,
  computed: {
    // 计算属性的 getter
    computedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

結果：

我是原始值: "Hello"
我是計算屬性的值: "olleH"

如果不使用計算屬性，那麼message.split('').reverse().join('') 就會直接寫到template 裡，那麼在模版中放入太多聲明式的邏輯會讓模板本身過重，尤其當在頁面中使用大量複雜的邏輯表達式處理資料時，會對頁面的可維護性造成很大的影響

而且計算屬性如果依賴不變的話，它就會變成緩存，computed 的值就不會重新計算

所以，如果資料要透過複雜邏輯來得出結果，那麼就建議使用計算屬性

watch

一個對象，鍵是data 對應的數據，值是對應的回呼函數。值也可以是方法名，或包含選項的對象，當data 的資料改變時，就會發生一個回調，他有兩個參數，一個val （修改後的data 資料），一個oldVal（原來的data 數據)
Vue 實例將會在實例化時呼叫$watch()，遍歷watch 物件的每一個屬性

基礎範例##

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += &#39;hi&#39;">obj.a + 'hi'</button>
      <button @click="obj = {a:&#39;a&#39;}">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");

注意：

不應該使用箭頭函數來定義watcher 函數，因為箭頭函數沒有this，它的this 會繼承它的父級函數，但是它的父級函數是window，導致箭頭函數的this 指向window，而不是Vue 實例

vm.$watch()

的用法和watch 回呼類似

vm.$watch(' data屬性名稱', fn, {deep: .., immediate: ..})

vm.$watch("n", function(val, newVal){
      console.log("n 变了");
},{deep: true, immediate: true})

vue計算屬性和watch的區別

計算屬性vs 屬性偵測首次運行##呼叫時需要在範本中渲染，修改計算所依賴元資料呼叫時只需修改元資料#預設深度依賴預設淺度觀測#適合做篩選，不可異步適合做執行異步或開銷較大的操作如果一個資料需要經過複雜計算就用computed


計算屬性（computed）	屬性偵測（ watch）
首次不執行

如果一個資料需要被監聽並且對資料做一些操作就用watch

vue計算屬性和watch的差別有哪些？

相關文章