003-讀書筆記-Vue官網計算屬性與監聽器

dadong 發布于2019-08-21 17:16 / 2122人閱讀

摘要：監聽器監聽器的作用就是監視實例中的內容變化的。需要監聽哪個屬性，就把屬性的名字寫在監聽器中。總結監聽器的一般寫法監聽器的完整寫法，指定兩個參數參考內容計算屬性和觀察者

1.計算屬性 1-1 計算屬性概述

計算屬性也是 Vue 實例的屬性，和 data 方法中返回的對象中的屬性是等同的存在。通常來說，計算屬性可以簡單理解：

計算屬性其實就是 Vue 實例的一個屬性

計算屬性一般依賴傳統的 Vue 實例屬性

計算屬性一般是通過運算得到的屬性

如果要更加深入的理解計算屬性，可以往下看。

1-2 搭建HTML結構

由于計算屬性有幾個特性，需要做一些測試，雖然這些測試可以在 vue-devtools 中調試查看，但是肯定沒有在頁面上看著更直觀，因此，搭建一下簡單的 HTML 結構，更好的查看最終的執行效果：

展示的效果如下圖：

現在基本結構已經搭建完成了，下面就是寫一些 JavaScript 代碼來操作這些屬性了。

1-3 計算屬性的簡單使用

為了遞進式的了解計算屬性，首先我們來看看，計算屬性是如何通過常規屬性計算得到一個新的屬性的。

這里沿用官網給出的例子，將常規屬性反轉得到計算屬性。

這個時候，聚焦到的 DOM 元素有 文本框1號 文本框中輸入 計算屬性的值，會發現計算屬性會隨著常規屬性的輸入，輸出常規屬性的反轉形式：

可以發現，上面的計算屬性是一個函數，返回值就是計算屬性的值，而計算得到的值是依賴 Vue 的實例屬性 inpVal

1-4 計算屬性的get與set

get說明：

上面的計算屬性只是一種簡寫方式，完整的寫法如下：

    computed: {
      comInpVal: {
        get() {
          return this.inpVal.split("").reverse().join("")
        }
      }
    }

其實在寫計算屬性的時候，默認指定的是計算屬性的 get 方法。因此，可以得出兩個結論：

在計算屬性不需要設置值的時候，可以只寫出 get 方法，并使用簡寫的形式

計算屬性的 get 方法必須指定返回值，返回值作為計算屬性的最終值

set說明：

既然存在了 get 方法來獲取值，是不是就存在 set 方法來設置值呢？答案是肯定的，這也是結構中 文本框2號 存在的意義。

現在我們在 文本框2號 中輸入內容，會發現谷歌人員開發工具中會報錯。

[Vue warn]: Computed property "comInpVal" was assigned to but it has no setter.

從報錯信息中，說明了沒有指定 setter，因此不能對計算屬性進行值的設置。如果我非要設置，并且還不讓它報錯，怎么辦？
這個時候就可以指定 set 方法了。

下面我們指定 set 方法，通過計算屬性的設置來得到常規屬性的反轉值：

    computed: {
      comInpVal: {
        get() { // get方法：獲取值
          return this.inpVal.split("").reverse().join("")
        },
        set(val) { // set方法：設置值
          this.inpVal = val.split("").reverse().join("")
        }
      }
    }

這個時候，再次在 文本框2號 中輸入內容，不會出現任何錯誤。至此，獲取計算屬性的值和設置計算屬性的值都已經學習完成了。

2.監聽器

監聽器的作用就是監視 Vue 實例中的內容變化的。

2-1 搭建簡單的HTML結構

這次我們查看效果的時候，主要是在谷歌開發工具中的控制臺中，因此，搭建一個簡單的結構就好：

2-2 簡單使用監聽器

下面我們補充一下監聽器，用來監聽 inpVal 屬性：

通過代碼會發現，監聽器寫在 watch 中。需要監聽哪個屬性，就把屬性的名字寫在監聽器中。

在輸入框中不斷輸入內容，就會看到隨著內容的輸入，控制臺中的內容也是不斷變化的。

2-3 監聽器的第一個參數

在代碼中可以看到，監聽器是一個函數，如果是函數，那么應該就可以存在參數，下面指定第一個參數。

    watch: {
      inpVal(newVal) {
        console.log(this.inpVal === newVal)
      }
    }

在文本框中輸入內容的時候，會發現，控制臺中輸入的結果始終是 true，這說明，第一個參數就是監視的屬性值。
因此，如果只需要得到最終的結果的情況下，參數可以省略不寫。

2-4 監聽器的第二個參數

監聽器的第一個參數是新輸入的值，那第二個參數就是舊值。讓我們寫出兩個參數對比一下：

    watch: {
      inpVal(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }

在輸入框中輸入內容，會發現控制臺中輸出的效果如下：

1
12 1
123 12

可以發現，在 123 輸入的時候，12 是前一個值。這個時候，就很清楚的知道，123 是新值，前一個值是舊值。

2-5 總結

監聽器的一般寫法：

    watch: {
      inpVal() {
        // ...
      }
    }

監聽器的完整寫法，指定兩個參數：

    watch: {
      inpVal(newVal, oldVal) {
        // ...
      }
    }

3.參考內容

計算屬性和觀察者

云服務器 GPU云服務器 vue的計算屬性讀書筆記編程思想讀書筆記大數據時代讀書筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89336.html

004-讀書筆記-Vue官網 Class與Style的綁定

摘要：綁定綁定，使用，簡寫的形式是。綁定比較靈活，可以使用表達式字符串對象或數組。綁定字符串綁定字符串的時候只能綁定一個，不能綁定多個。 1.綁定Class 綁定Class，使用 v-bind:class，簡寫的形式是 :class。綁定Class比較靈活，可以使用表達式、字符串、對象或數組。 1-1 搭建結構首先，新建一些 class 樣式： .colorRed { colo...

hufeng 2019-08-21 17:16 評論0 收藏0
002-讀書筆記-Vue官網認識數據與指令

摘要：首先把改成的形式這是一段測試文字綁定最后的顯示效果如下，如果要看具體的形式，可以在谷歌人員開發工具中自行查看指令的組成部分經過上面的介紹，應該對指令有一個大概的認識，下面就來對指令的每一項進行說明。這篇筆記主要用來說明 Vue 中數據的定義和指令的一些特性，后續會做更深入的說明。 1.Vue中的data函數 1-1 使用data函數由于使用的是單文件組件，因此 Vue 組件中的數據...

hqman 2019-08-21 17:15 評論0 收藏0
007-讀書筆記-Vue官網插件

摘要：插件的定義與使用插件的定義需要注意的點定義一個對外公開的方法方法有兩個參數第一個參數的構造器，第二個參數是一個可選的對象必須，插件對外公開的方法構造器可選參數，是一個對象添加全局方法或屬性添加全局方法或屬性添加全局資源指令過濾器過渡等添 1.插件的定義與使用 1-1 插件的定義需要注意的點：定義一個對外公開的install方法 install方法有兩個參數：第一個參數Vue的構造...

468122151 2019-08-22 11:13 評論0 收藏0
006-讀書筆記-Vue官網混合

摘要：混合中的鉤子函數同名鉤子函數都會執行如果組件中存在鉤子函數，混合中也存在相同的鉤子函數，那么兩個鉤子函數都會執行。最終的執行結果多個混合的鉤子函數多個混合的鉤子函數，會根據混合使用的順序來執行。 1.認識混合混合(mixins)是一種分發Vue組件中可復用功能的非常靈活的方式混合的作用：抽取多個組件的共同部分，增強組件的可復用性混合的實質：混合對象類似一個Vue實例，可以包含V...

kk_miles 2019-08-22 11:13 評論0 收藏0
005-讀書筆記-Vue官網自定義指令

摘要：自定義指令的使用在組件中定義一個自定義指令，作用將當前節點中字體顏色設置為紅色。參考內容自定義指令 1.自定義指令的使用在組件中定義一個自定義指令，作用：將當前DOM節點中字體顏色設置為紅色。在自定義指令中簡化了鉤子函數，下面的鉤子函數相當于 bind 和 unbind 的縮寫： export default { name: app, directives: ...

teren 2019-08-22 11:13 評論0 收藏0