在 Vue 3 中，watch 和 computed 都是非常重要的概念，它們都可以用于觀察和響應(yīng)數(shù)據(jù)的變化，但在使用場景和原理上存在明顯的區(qū)別。本文將詳細(xì)解析 Vue 3 中監(jiān)聽屬性 (watch) 和計算屬性 (computed) 的區(qū)別，幫助你更好地理解它們的用法。

一、Vue3和Vue2的區(qū)別

Vue3和Vue2有以下幾個主要區(qū)別：

• 響應(yīng)式系統(tǒng)的改進：Vue3采用了Proxy作為響應(yīng)式系統(tǒng)的核心，相比Vue2的Object.defineProperty實現(xiàn)，Proxy具有更好的性能和更豐富的攔截能力。這使得Vue3在響應(yīng)式數(shù)據(jù)追蹤、嵌套對象的監(jiān)聽和數(shù)組變化的處理等方面都有了顯著的改進。
• 組合式API：Vue3引入了組合式API，將組件的邏輯按照功能進行組合，解決了Vue2中復(fù)雜組件邏輯難以維護和復(fù)用的問題。通過使用setup函數(shù)，可以更靈活地組織組件的代碼，并且提供了更好的類型推導(dǎo)和IDE支持。
• 更好的性能：Vue3在編譯器和運行時方面都做了優(yōu)化，編譯器生成的代碼更加高效，運行時的性能也有所提升。同時，Vue3還引入了靜態(tài)提升（Static Hoisting）和樹搖（Tree Shaking）等優(yōu)化策略，減小了打包后的文件體積。
• TypeScript支持：Vue3對TypeScript的支持更加完善，包括提供了更好的類型推導(dǎo)和錯誤提示，支持使用Composition API編寫類型安全的代碼。
• 更好的開發(fā)體驗：Vue3引入了一些新的特性和API，如Fragments、Teleport、Suspense等，使得開發(fā)者可以更方便地處理一些常見的場景和交互需求。

由于Vue3相對于Vue2做了較大的改動，遷移到Vue3可能需要進行一些代碼調(diào)整和重寫。同時，一些Vue2的插件和庫可能還不支持Vue3，需要等待相應(yīng)的更新或替代方案。

二、計算屬性computed

計算屬性（computed）是Vue中一個非常常用的特性，它可以根據(jù)響應(yīng)式數(shù)據(jù)的變化自動計算出結(jié)果并返回。通過計算屬性，我們可以將復(fù)雜的邏輯計算抽離出來，使得模板代碼更加簡潔和可讀性更好。

在Vue中，計算屬性是在Vue實例中的computed選項中定義的。定義一個計算屬性的方式是使用get函數(shù)來返回計算的結(jié)果。例如：

var vm = new Vue({
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    }
  }
});

上面的例子中，我們創(chuàng)建了一個message的計算屬性reversedMessage，它返回message字符串的反轉(zhuǎn)結(jié)果。計算屬性會在message發(fā)生改變時自動重新計算并更新。

在模板中使用計算屬性的方式與使用普通的數(shù)據(jù)屬性是相同的：

<div>
  <p>Message: {{ message }}</p>
  <p>Reversed Message: {{ reversedMessage }}</p>
</div>

當(dāng)message發(fā)生變化時，reversedMessage會自動更新。

使用計算屬性的好處是它具有緩存機制，只有在它依賴的響應(yīng)式數(shù)據(jù)發(fā)生變化時，才會重新計算。這樣可以避免不必要的計算，提高性能。

除了get函數(shù)外，計算屬性還可以定義一個set函數(shù)，用于處理計算屬性的賦值操作。例如：

computed: {
  fullName: {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    },
    set: function(newValue) {
      var names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1];
    }
  }
}

上面的例子中，我們定義了一個fullName計算屬性，它由firstName和lastName組合而成。當(dāng)給fullName賦值時，會自動觸發(fā)set函數(shù)，將新的值拆分成firstName和lastName并更新。

總結(jié)一下，計算屬性是用于在Vue實例中根據(jù)響應(yīng)式數(shù)據(jù)進行計算的特性，它能夠使得模板代碼更加簡潔和可讀性更好。使用計算屬性還可以享受到緩存機制帶來的性能提升。

三、監(jiān)聽屬性watch

在Vue中，可以使用watch選項來監(jiān)聽數(shù)據(jù)的變化。watch選項可以用來觀察和響應(yīng)Vue實例中數(shù)據(jù)的變化，并執(zhí)行一些自定義的操作。

在Vue實例中，可以通過在watch選項對象中定義屬性來監(jiān)聽數(shù)據(jù)的變化。每個屬性都對應(yīng)一個回調(diào)函數(shù)，當(dāng)被監(jiān)聽的數(shù)據(jù)發(fā)生變化時，回調(diào)函數(shù)會被觸發(fā)。

下面是一個使用watch選項的示例：

var vm = new Vue({
  data: {
    message: 'Hello Vue!',
  },
  watch: {
    message: function(newValue, oldValue) {
      // 在message發(fā)生變化時觸發(fā)該回調(diào)函數(shù)
      console.log('message變?yōu)椋?, newValue);
    },
  },
});

在上面的示例中，我們定義了一個Vue實例，并在watch選項中監(jiān)聽了message屬性。當(dāng)message屬性發(fā)生變化時，回調(diào)函數(shù)會被調(diào)用，并且傳入兩個參數(shù)：newValue和oldValue，分別表示屬性變化后的新值和變化前的舊值。

除了監(jiān)聽簡單的數(shù)據(jù)屬性，watch選項也可以監(jiān)聽計算屬性、嵌套對象的屬性等。例如：

var vm = new Vue({
  data: {
    user: {
      name: 'Alice',
      age: 18,
    },
  },
  watch: {
    'user.name': function(newValue, oldValue) {
      console.log('user.name變?yōu)椋?, newValue);
    },
    'user.age': function(newValue, oldValue) {
      console.log('user.age變?yōu)椋?, newValue);
    },
  },
});

在上面的示例中，我們監(jiān)聽了user.name和user.age屬性的變化。

除了簡單的回調(diào)函數(shù)，watch選項還可以使用對象的形式來定義更復(fù)雜的監(jiān)聽操作，例如：

var vm = new Vue({
  data: {
    counter: 0,
  },
  watch: {
    counter: {
      handler: function(newValue, oldValue) {
        console.log('counter變?yōu)椋?, newValue);
      },
      immediate: true,  // 設(shè)置為true，表示立即執(zhí)行回調(diào)函數(shù)
    },
  },
});

在上面的示例中，我們使用了一個對象來定義watch選項。handler屬性對應(yīng)回調(diào)函數(shù)，immediate屬性設(shè)置為true，表示立即執(zhí)行回調(diào)函數(shù)。

總結(jié)一下，watch選項可以用來觀察和響應(yīng)Vue實例中數(shù)據(jù)的變化。通過在watch選項中定義屬性和回調(diào)函數(shù)，可以監(jiān)聽數(shù)據(jù)的變化并執(zhí)行自定義的操作。

四、計算屬性和監(jiān)聽屬性的區(qū)別

計算屬性（computed）和監(jiān)聽屬性（watch）在Vue中都是用于監(jiān)聽數(shù)據(jù)變化的機制，但它們之間有一些區(qū)別。

用途和應(yīng)用場景：計算屬性適用于對已有的響應(yīng)式數(shù)據(jù)進行計算和派生新的數(shù)據(jù)，通常用于模板中展示數(shù)據(jù)。而監(jiān)聽屬性適用于監(jiān)聽一個或多個數(shù)據(jù)的變化，并執(zhí)行一些特定的操作，比如異步請求、副作用操作等。

響應(yīng)性：計算屬性是基于響應(yīng)式數(shù)據(jù)進行計算，只有相關(guān)的響應(yīng)式數(shù)據(jù)發(fā)生改變時，計算屬性會重新計算。而監(jiān)聽屬性可以監(jiān)聽任何數(shù)據(jù)的變化，不限于響應(yīng)式數(shù)據(jù)。

語法和定義方式：計算屬性是通過在Vue實例的computed選項中定義的，采用get函數(shù)返回計算的結(jié)果。監(jiān)聽屬性是通過在Vue實例的watch選項中定義的，可以是簡單的屬性名，也可以是一個函數(shù)。

響應(yīng)方式：計算屬性是被動響應(yīng)的，只有在模板中使用了計算屬性的結(jié)果時，計算屬性才會被計算并緩存起來，并在相關(guān)的響應(yīng)式數(shù)據(jù)變化時更新。而監(jiān)聽屬性是主動監(jiān)聽的，當(dāng)監(jiān)聽的數(shù)據(jù)發(fā)生變化時，監(jiān)聽函數(shù)會被立即觸發(fā)。

參數(shù)和使用：計算屬性的回調(diào)函數(shù)不需要傳入?yún)?shù)，只需返回一個值。而監(jiān)聽屬性的回調(diào)函數(shù)通常需要傳入兩個參數(shù)，分別是新值和舊值。

總的來說，計算屬性適用于對已有的數(shù)據(jù)進行計算，派生新的數(shù)據(jù)，并在模板中使用；而監(jiān)聽屬性適用于監(jiān)聽數(shù)據(jù)的變化，并執(zhí)行一些特定的操作。根據(jù)具體的需求和場景，選擇適合的機制。

到此這篇關(guān)于Vue3計算屬性computed和監(jiān)聽屬性watch的文章就介紹到這了,更多相關(guān)vue計算屬性computed和監(jiān)聽屬性watch內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論