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

1.計算屬性

1-1 計算屬性概述

計算屬性也是 Vue 實例的屬性，和 data 方法中返回的對象中的屬性是等同的存在。一般來講，計算屬性能夠簡單理解：

1. 計算屬性其實就是 Vue 實例的一個屬性
2. 計算屬性通常依賴傳統的 Vue 實例屬性
3. 計算屬性通常是經過運算獲得的屬性

若是要更加深刻的理解計算屬性，能夠往下看。

1-2 搭建HTML結構

因爲計算屬性有幾個特性，須要作一些測試，雖然這些測試能夠在 vue-devtools 中調試查看，可是確定沒有在頁面上看着更直觀，所以，搭建一下簡單的 HTML 結構，更好的查看最終的執行效果：

<template>
  <div id="app">
    <h2>常規屬性：</h2>
    <div>文本框1號：<input type="text" v-model="inpVal" placeholder="常規屬性"></div>
    <p>文本框中輸入：{{inpVal}}</p>

    <hr>

    <h2>計算屬性：</h2>
    <div>文本框2號：<input type="text" v-model="comInpVal" placeholder="計算屬性"></div>
    <p>計算屬性的值：{{comInpVal}}</p>
  </div>
</template>

展現的效果以下圖：

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

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

爲了遞進式的瞭解計算屬性，首先咱們來看看，計算屬性是如何經過常規屬性計算獲得一個新的屬性的。

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

<script>
  export default {
    name: 'app',
    data() {
      return {
        inpVal: ''
      }
    },
    computed: {
      comInpVal() {
        return this.inpVal.split('').reverse().join('')
      }
    }
  }

</script>

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

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

1-4 計算屬性的get與set

get說明：

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

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

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

1. 在計算屬性不須要設置值的時候，能夠只寫出 get 方法，並使用簡寫的形式
2. 計算屬性的 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結構

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

<template>
  <div id="app">
    <input type="text" v-model="inpVal" placeholder="輸入內容">
  </div>
</template>

2-2 簡單使用監聽器

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

<script>
  export default {
    name: 'app',
    data() {
      return {
        inpVal: ''
      }
    },
    watch: {
      inpVal() {
        console.log(this.inpVal)
      }
    }
  }

</script>

經過代碼會發現，監聽器寫在 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.參考內容

• 計算屬性和觀察者