關(guān)于Vue的 watch、computed和methods的區(qū)別匯總

更新時間：2021年11月05日 10:19:09 作者：蜜瓜

這篇文章主要介紹關(guān)于Vue的 watch、computed和methods的區(qū)別，下面文章將圍繞Vue的 watch、computed和methods的續(xù)航管資料展開全文它們之間區(qū)別的內(nèi)容,需要的朋友可以參考一下，希望能幫助到大家

1 前言

創(chuàng)建一個Vue實例時，可以傳入一個選項對象

const vm = new Vue({
  data: {
    msg: 'hello'
  }，
  computed: {},
  methods: {},
  watch: {}
})

這個選項對象可以指定非常多的選項（或者說屬性），和數(shù)據(jù)相關(guān)的選項有：包括但不限于data、methods、computed、watch等等

其中methods、computed、watch都能通過函數(shù)來對數(shù)據(jù)進行處理或作出響應(yīng)，這三者有差異，但很容易混淆

2 基礎(chǔ)用法

用script引入vue.js，下面的代碼都在如下html中運行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Methods</title>
    <!-- 引入 vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    
  </body>
  <script>
    
  </script>
</html>

2.1 methods 方法

methods選項中的定義的函數(shù)稱為方法，在Vue實例化的過程中，methods對象中的方法將被混入到Vue實例中，成為Vue實例的方法?？梢灾苯油ㄟ^Vue實例訪問這些方法

<body>
  <div id="example">
    <!-- 顯示：a:1 -->
    <p>a:{{ plus() }}</p> 
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      a: 0,
    },
    methods: {
      plus: function () {
        return this.a + 1;
      },
    },
  });
  console.log(vm); // 查看控制臺輸出的vm，可以看到它有一個方法是：plus: ƒ ()，⚠️注意是方法
  console.log(vm.plus()); // 直接通過vm實例訪問方法，輸出：1
</script>

需要主動調(diào)用methods中的函數(shù)才能執(zhí)行，a的值改變并不能讓頁面中的<p>a:{{plus()}}</a>跟著更新

2.2 computed 計算屬性

computed選項中定義的函數(shù)稱為計算屬性，在Vue實例化的過程中，computed對象中的計算屬性將被混入到Vue實例中，成為Vue實例的同名屬性。

<body>
  <div id="example">
    <!-- 顯示：a:1 -->
    <p>a:{{ plus }}</p>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      a: 0,
    },
    computed: {
      plus: function () {
        return this.a + 1;
      },
    },
  });
  console.log(vm); // // 查看控制臺輸出的vm，可以看到它有一個屬性是：plus:1，⚠️注意是屬性
</script>

乍一看好像computed和methods功能一樣，確實在這個例子中二者展示效果相同

事實上通過打印vm實例以及訪問方式已經(jīng)體現(xiàn)出二者的一個不同之處：

methods中的函數(shù)會成為vm的方法
而computed中的函數(shù)經(jīng)過計算后會成為vm的同名屬性，屬性值為函數(shù)的計算結(jié)果，即返回值

另外，和方法不同的是，計算屬性能夠跟著它依賴的數(shù)據(jù)變化而進行響應(yīng)式更新，即a變化時，plus屬性也會更新

2.3 watch 偵聽器

watch選項中的鍵值對稱為偵聽器或者說監(jiān)聽屬性/監(jiān)聽屬性，鍵是需要觀察的表達式，值是對應(yīng)的回調(diào)函數(shù)（值還可以是其他形式，此處不展開）

在Vue實例化的過程中，這些需要偵聽的變量會被記錄下來，當(dāng)這些變量發(fā)生變化的時候，對應(yīng)的回調(diào)函數(shù)就會執(zhí)行

<body>
  <div id="example">
    <!-- 顯示：a:1 -->
    <p>a:{{ a }}</p>
  </div>
</body>
<script>
  const vm = new Vue({
    el: "#example",
    data: {
      a: 0,
    },
    watch: {
      a: function () {
        console.log("a發(fā)生了變化"); // 因為a的值變了，回調(diào)函數(shù)執(zhí)行
        console.log(this.a);
      },
    },
  });
  vm.a = 1; // 這里直接手動改變a的值
</script>

3 三者的區(qū)別

3.1 方法 VS 計算屬性

除了2.2中已經(jīng)提到的兩點區(qū)別之外，還有最重要的區(qū)別是：

計算屬性是基于它們的響應(yīng)式依賴進行緩存的，即上文中的a發(fā)生變化時，才會重新觸發(fā)求值函數(shù)，否則多次調(diào)用都會從緩存中求值，這對開銷較大的計算來說非常有用，可以避免重復(fù)計算
方法則是調(diào)用時總會重新執(zhí)行

下面用表格的形式對這兩者的區(qū)別進行總結(jié)：

	methods	computed
Vue實例化后成為vm實例的什么	成為vm實例上的方法	成為vm實例上的屬性
能否根據(jù)依賴的數(shù)據(jù)進行響應(yīng)式更新	不能，需要主動調(diào)用方法	能
能否緩存	不能，每次調(diào)用重新執(zhí)行	能，依賴的數(shù)據(jù)不變，會從緩存中取值

3.2 計算屬性 VS 偵聽器

首先最明顯的區(qū)別，偵聽器的命名方式是固定的，想要監(jiān)聽誰，就和誰同名。而方法和計算屬性可任意命名
其次，偵聽器無法主動進行訪問，而另外兩者都能主動訪問
計算屬性和偵聽器的使用場景：

如果某個值需要通過一個或多個數(shù)據(jù)計算得到，就使用計算屬性

偵聽屬性主要是監(jiān)聽某個值的變化，然后進行需要的邏輯處理；此外當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，偵聽屬性就比較有用，具體例子可見vue文檔-偵聽器

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

您可能感興趣的文章: