快捷導(dǎo)航

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

更新時(shí)間：2023年04月26日 08:42:28 作者：葉落風(fēng)塵

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

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

Vue 的 computed 屬性實(shí)現(xiàn)了一個(gè)響應(yīng)式的計(jì)算屬性。當(dāng)計(jì)算屬性所依賴的響應(yīng)式變量發(fā)生改變時(shí)，計(jì)算屬性會(huì)自動(dòng)重新計(jì)算其值。

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

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

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

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

computed demo

下面是一個(gè)簡(jiǎn)單的 Vue Computed 的實(shí)現(xiàn)示例：

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

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

當(dāng)我們?cè)L問 vm.fullName 時(shí)，Vue 會(huì)自動(dòng)調(diào)用 fullName 函數(shù)，并將其結(jié)果緩存起來。如果后續(xù)訪問 vm.fullName，而且 firstName 或 lastName 沒有發(fā)生變化，Vue 將直接返回之前緩存的結(jié)果，而不會(huì)重新計(jì)算。

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

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

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

watch demo

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

<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>

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

當(dāng)你在瀏覽器中運(yùn)行該示例時(shí)，每次點(diǎn)擊“Increment”按鈕時(shí)，Vue 都會(huì)檢測(cè)到count的值已更改，并且將調(diào)用watch選項(xiàng)中定義的函數(shù)。該函數(shù)輸出將類似于以下內(nèi)容：