Vue中的computed和watch用法及區(qū)別

更新時間：2023年04月26日 08:42:28 作者：葉落風塵

Vue中的computed和watch都可以監(jiān)聽數(shù)據變化，但computed主要用于計算派生屬性，而watch則用于監(jiān)聽特定數(shù)據變化并執(zhí)行回調函數(shù)。兩者使用時需要注意區(qū)別

vue computed 是如何實現(xiàn)的

Vue 的 computed 屬性實現(xiàn)了一個響應式的計算屬性。當計算屬性所依賴的響應式變量發(fā)生改變時，計算屬性會自動重新計算其值。

Vue 在內部通過使用 Object.defineProperty() 方法來實現(xiàn) computed 屬性。具體地說，Vue 創(chuàng)建一個新的計算屬性描述符對象，該對象包含 get 和 set 方法，然后調用 Object.defineProperty() 方法將計算屬性綁定到 Vue 實例上。

在 get 方法中，Vue 會收集計算屬性所依賴的響應式變量，并建立依賴關系圖。這樣，當響應式變量發(fā)生變化時，Vue 就能夠知道哪些計算屬性需要重新計算。

在 set 方法中，Vue 可以執(zhí)行一些額外的邏輯，例如檢查計算屬性是否可以被設置。但通常情況下，set 方法是不需要的，因為計算屬性是只讀的。

總之，Vue 的 computed 屬性利用了 JavaScript 中的屬性描述符和響應式原理，來實現(xiàn)一個方便、高效、易用的計算屬性系統(tǒng)。

computed demo

下面是一個簡單的 Vue Computed 的實現(xiàn)示例：

// 創(chuàng)建一個 Vue 實例
const vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe',
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    },
  },
});
// 訪問計算屬性
console.log(vm.fullName); // "John Doe"

在上述示例中，Vue 實例 vm 中定義了一個 data 對象和一個 computed 對象。在 computed 對象中，我們定義了一個名為 fullName 的函數(shù)，它返回 firstName 和 lastName 屬性的組合。

當我們訪問 vm.fullName 時，Vue 會自動調用 fullName 函數(shù)，并將其結果緩存起來。如果后續(xù)訪問 vm.fullName，而且 firstName 或 lastName 沒有發(fā)生變化，Vue 將直接返回之前緩存的結果，而不會重新計算。

這就是 Vue Computed 的基本工作原理。通過定義一個計算屬性，你可以輕松地實現(xiàn)數(shù)據的計算和緩存。這樣做不僅可以提高性能，還可以使代碼更加簡潔易讀。

vue的watch是如何實現(xiàn)的

Vue.js 的 watch 是通過使用 Object.defineProperty() 函數(shù)實現(xiàn)的。當你在 Vue 實例上定義一個 watch 時，Vue 會將其作為一個屬性添加到實例對象中，并使用 Object.defineProperty() 將該屬性轉換為 getter/setter 形式。這樣，當被監(jiān)控的屬性發(fā)生變化時，Vue 就會調用對應的回調函數(shù)以執(zhí)行相應的操作。同時，Vue 還提供了深度監(jiān)聽和立即觸發(fā)回調等

watch demo

以下是一個簡單的 Vue 示例，演示如何使用watch來觀察數(shù)據的變化：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      increment() {
        this.count++;
      },
    },
    watch: {
      count(newVal, oldVal) {
        console.log(`count changed from ${oldVal} to ${newVal}`);
      },
    },
  };
</script>

該示例定義了一個名為count的響應式數(shù)據，并在模板中顯示它。還定義了一個increment方法，在點擊按鈕時將計數(shù)器遞增。此外，還定義了一個watch選項，以便在數(shù)據變化時打印一條消息。

當你在瀏覽器中運行該示例時，每次點擊“Increment”按鈕時，Vue 都會檢測到count的值已更改，并且將調用watch選項中定義的函數(shù)。該函數(shù)輸出將類似于以下內容：