欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(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)對象

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

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

其中methods、computedwatch都能通過函數(shù)來對數(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對象中的方法將被混入到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對象中的計(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>

乍一看好像computedmethods功能一樣,確實(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)中的鍵值對稱為偵聽器或者說監(jiān)聽屬性/監(jiān)聽屬性,鍵是需要觀察的表達(dá)式,值是對應(yīng)的回調(diào)函數(shù)(值還可以是其他形式,此處不展開)

Vue實(shí)例化的過程中,這些需要偵聽的變量會(huì)被記錄下來,當(dāng)這些變量發(fā)生變化的時(shí)候,對應(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ì)從緩存中求值,這對開銷較大的計(jì)算來說非常有用,可以避免重復(fù)計(jì)算
  • 方法則是調(diào)用時(shí)總會(huì)重新執(zhí)行

下面用表格的形式對這兩者的區(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ì)算屬性和偵聽器的使用場景:

如果某個(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、computedmethods的區(qū)別匯總的文章就介紹到這了,更多相關(guān)Vuewatchcomputedmethods的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論