Vue計算屬性與監視屬性實現方法詳解

Posted on by

一、計算屬性

在開發中，可以有這樣的需求，在屬性（date）中，有fistName和lastName兩個屬性，需要將兩個屬性拼接起來，這種需求也很簡單，有以下實現方式

1、插值語法實現

直接在body中將兩個數據拼接

    <div id="root">
        姓：<input type="text" v-model="fistName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fistName + lastName}}</span>
    </div>

2、通過方法實現

編寫一個方法，返回值為兩者拼在一起的字符串

    <div id="root">
        姓：<input type="text" v-model="fistName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        <!-- 隻要數據發生改變，這個方法就會再被調用一次 -->
        姓名：<span>{{fullName()}}</span>
    </div>
    new Vue({
        el:'#root',
        data:{
            fistName:'張',
            lastName:'三'
        },
        methods: {
            fullName(){
                return this.fistName + this.lastName;
            }
        },
    })

3、通過計算屬性

計算屬性就是vue中的computed，這裡面存放的是計算屬性

而data中的是屬性，兩者不一樣

    <div id="root">
        姓：<input type="text" v-model="fistName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>
    </div>

const vm = new Vue({
        el:'#root',
        //屬性
        data:{
            fistName:'張',
            lastName:'三'
        },
        // 計算屬性
        computed:{
            fullName:{
                //當有人讀取fullName時，get就會被調用，返回值為fullName的值
                //get調用時機
                //1、初次讀取fullName
                //2、所依賴的數據變化時
                get(){
                    //這裡的this是指vm
                    return this.fistName + this.lastName;
                },
                //當fullName被調用時候調用
                set(value){
                    const arr = value.split('-')
                    this.fistName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })

計算屬性和方法的編寫方式有點區別

  • {{}}中方法是寫一個方法的，即帶括號
  • 但是計算屬性隻需要寫名字即可，不用帶花括號

計算屬性中要編寫兩個方法，一個是get方法，另一個是set方法

  • 當有人讀取fullname這個計算屬性，get方法就會被調用，返回值是fullname的值
  • 當有人修改fullname這個計算屬性，set方法就會被調用

當明確隻有get方法，不需要set方法的時候，計算屬性可以簡寫成如下：

            fullName(){
                return this.fistName + this.lastName;
            }

get函數什麼時候執行：

  • 初次讀取時會執行一次
  • 當依賴的數據發生變化時會被調用一次

計算屬性的優勢

相對於方法來說，計算屬性內部有緩存機制（復用），效率更好，調試更方便

簡單來說，倘若計算屬性不變，計算屬性的數據就會存進緩存中，當頁面上的其他數據需要讀取這個計算屬性的話，不再需要從vm獲取，直接從緩存裡面獲取

二、監視屬性

監視屬性可以監視某個屬性的變化，並且可以獲取變化前和變化後的數值

通過關鍵詞watch實現

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <h2>今天天氣很{{info}}</h2>
      <button @click="changgeWeather">切換天氣</button>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;
    const vm = new Vue({
      el: "#root",
      data: {
        isHot: true,
      },
      computed: {
        info() {
          return this.isHot ? "炎熱" : "涼爽";
        },
      },
      methods: {
        changgeWeather() {
          this.isHot = !this.isHot;
        },
      },
      // 監視
      //適用於一開始很明確地知道要監視誰
      watch: {
        isHot: {
          //初始化時讓handler調用一下
          immediate: true,
          //什麼時候調用？當isHost發生改變時
          handler(newValue, oldValue) {
            console.log("isHost被調用", newValue, oldValue);
          }
        },
      // }
    });
  </script>
</html>

例如如上案例，當isHost被修改的時候，監視屬性中的isHost中的handler就會被調用

而 immediate: true 的作用是再初始化的時候調用一下這個監視屬性

註意的是監視屬性必須存在，才可以進行監視

除瞭以上邪惡寫法，還可以通過vm.$watch監視

    vm.$watch("isHost", {
      //初始化時讓handler調用一下
      immediate: true,
      //什麼時候調用？當isHost發生改變時
      handler(newValue, oldValue) {
        console.log("isHost被調用", newValue, oldValue);
      },
    });

兩種的使用場合不同：

  • 第一個則是，一開始就很明確這個屬性需要監視，則寫在vue裡面
  • 第二個則是，一開始不知道這個屬性需要被監視，然後後面加上的，就可以用vm.$watch

當監視屬性隻有handler的時候，可以進行簡寫

watch: {
        isHot((newValue, oldValue)): {
            console.log("isHost被調用", newValue, oldValue);
        }
}

三、深度監視

深度監視主要用於監視層次比較高的

 data: {
        isHot: true,
        number: {
          a: 1,
          b: 1,
        },
      }

例如這個data裡面的number，需要監視裡面的a和b的變化，則需要用到監視屬性

"number.a": {
            handler(newValue, oldValue) {
              console.log("a改變", newValue, oldValue);
            },
          },

監視對象裡面的某個屬性，就可以如上這也進行操作，“對象.屬性”表示監視裡面的某一個屬性

同時也可以監視number的變化，隻需要在在裡面開啟深度即可

        number:{
          //表示深度開啟
          deep:true,
          handler(){
            console.log("number發生改變");
          }

監視對象裡面的某個屬性，就可以如上這也進行操作，“對象.屬性”表示監視裡面的某一個屬性

同時也可以監視number的變化，隻需要在在裡面開啟深度即可

        number:{
          //表示深度開啟
          deep:true,
          handler(){
            console.log("number發生改變");
          }

到此這篇關於Vue計算屬性與監視屬性實現方法詳解的文章就介紹到這瞭,更多相關Vue計算屬性與監視屬性內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：