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

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

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

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

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

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

computed demo

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

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

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

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

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

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

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

watch demo

以下是一個簡單的 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>

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

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

count changed from 0 to 1
count changed from 1 to 2
count changed from 2 to 3
...

到此這篇關(guān)于Vue中的computed和watch用法及區(qū)別的文章就介紹到這了,更多相關(guān)Vue computed和watch內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論