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

關(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>

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

事實上通過打印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實例化的過程中,這些需要偵聽的變量會被記錄下來,當這些變量發(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)用都會從緩存中求值,這對開銷較大的計算來說非常有用,可以避免重復計算
  • 方法則是調(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)聽某個值的變化,然后進行需要的邏輯處理;此外當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,偵聽屬性就比較有用,具體例子可見vue文檔-偵聽器

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

相關(guān)文章

  • Vue動畫之第三方類庫實現(xiàn)動畫方式

    Vue動畫之第三方類庫實現(xiàn)動畫方式

    這篇文章主要介紹了Vue動畫之第三方類庫實現(xiàn)動畫方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue 父組件通過v-model接收子組件的值的代碼

    vue 父組件通過v-model接收子組件的值的代碼

    這篇文章主要介紹了vue 父組件通過v-model接收子組件的值的代碼,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-10-10
  • vue2使用element-ui,el-table不顯示,用npm安裝方式

    vue2使用element-ui,el-table不顯示,用npm安裝方式

    這篇文章主要介紹了vue2使用element-ui,el-table不顯示,用npm安裝方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • Vue子組件調(diào)用父組件方法案例詳解

    Vue子組件調(diào)用父組件方法案例詳解

    這篇文章主要介紹了Vue子組件調(diào)用父組件方法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • vue引入css文件導致全局污染的問題

    vue引入css文件導致全局污染的問題

    這篇文章主要介紹了vue引入css文件導致全局污染的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue中mapMutations傳遞參數(shù)方式

    Vue中mapMutations傳遞參數(shù)方式

    這篇文章主要介紹了Vue中mapMutations傳遞參數(shù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Antd下拉選擇,自動匹配功能的實現(xiàn)

    Antd下拉選擇,自動匹配功能的實現(xiàn)

    這篇文章主要介紹了Antd下拉選擇,自動匹配功能的實現(xiàn),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • 解決vue無法設(shè)置滾動位置的問題

    解決vue無法設(shè)置滾動位置的問題

    這篇文章主要介紹了解決vue無法設(shè)置滾動位置的問題 ,需要的朋友可以參考下
    2018-10-10
  • Vue使用高德地圖實現(xiàn)城市定位

    Vue使用高德地圖實現(xiàn)城市定位

    這篇文章主要為大家詳細介紹了Vue使用高德地圖實現(xiàn)城市定位,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue中eslint導致的報錯問題及解決

    vue中eslint導致的報錯問題及解決

    這篇文章主要介紹了vue中eslint導致的報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評論