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

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

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

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

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

二、計(jì)算屬性computed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下面是一個(gè)使用watch選項(xiàng)的示例：

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

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

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

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屬性的變化。

除了簡(jiǎn)單的回調(diào)函數(shù)，watch選項(xiàng)還可以使用對(duì)象的形式來定義更復(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ù)
    },
  },
});

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論