快捷導(dǎo)航

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

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

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

1 前言

創(chuàng)建一個(gè)Vue實(shí)例時(shí)，可以傳入一個(gè)選項(xiàng)對(duì)象

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

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

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

2 基礎(chǔ)用法

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

<!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選項(xiàng)中的定義的函數(shù)稱為方法，在Vue實(shí)例化的過程中，methods對(duì)象中的方法將被混入到Vue實(shí)例中，成為Vue實(shí)例的方法。可以直接通過Vue實(shí)例訪問這些方法

<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); // 查看控制臺(tái)輸出的vm，可以看到它有一個(gè)方法是：plus: ƒ ()，⚠️注意是方法
  console.log(vm.plus()); // 直接通過vm實(shí)例訪問方法，輸出：1
</script>

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

2.2 computed 計(jì)算屬性

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

<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); // // 查看控制臺(tái)輸出的vm，可以看到它有一個(gè)屬性是：plus:1，⚠️注意是屬性
</script>

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

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

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

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

2.3 watch 偵聽器

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

在Vue實(shí)例化的過程中，這些需要偵聽的變量會(huì)被記錄下來，當(dāng)這些變量發(fā)生變化的時(shí)候，對(duì)應(yīng)的回調(diào)函數(shù)就會(huì)執(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ā)生了變化"); // 因?yàn)閍的值變了，回調(diào)函數(shù)執(zhí)行
        console.log(this.a);
      },
    },
  });
  vm.a = 1; // 這里直接手動(dòng)改變a的值
</script>

3 三者的區(qū)別

3.1 方法 VS 計(jì)算屬性

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

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

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

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

3.2 計(jì)算屬性 VS 偵聽器

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

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

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

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

您可能感興趣的文章: