Vue計(jì)算屬性與監(jiān)視屬性實(shí)現(xiàn)方法詳解

更新時(shí)間：2022年08月23日 10:14:54 作者：Spring是Java的春天

最近在學(xué)習(xí)vue,學(xué)習(xí)中遇到了一些感覺挺重要的知識(shí)點(diǎn),感覺有必要整理下來(lái),這篇文章主要給大家介紹了關(guān)于Vue.js中計(jì)算屬性、監(jiān)視屬性的相關(guān)資料,需要的朋友可以參考下

一、計(jì)算屬性

在開發(fā)中，可以有這樣的需求，在屬性（date）中，有fistName和lastName兩個(gè)屬性，需要將兩個(gè)屬性拼接起來(lái)，這種需求也很簡(jiǎn)單，有以下實(shí)現(xiàn)方式

1、插值語(yǔ)法實(shí)現(xiàn)

直接在body中將兩個(gè)數(shù)據(jù)拼接

    <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、通過方法實(shí)現(xiàn)

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

    <div id="root">
        姓：<input type="text" v-model="fistName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        <!-- 只要數(shù)據(jù)發(fā)生改變，這個(gè)方法就會(huì)再被調(diào)用一次 -->
        姓名：<span>{{fullName()}}</span>
    </div>

    new Vue({
        el:'#root',
        data:{
            fistName:'張',
            lastName:'三'
        },
        methods: {
            fullName(){
                return this.fistName + this.lastName;
            }
        },
    })

3、通過計(jì)算屬性

計(jì)算屬性就是vue中的computed，這里面存放的是計(jì)算屬性

而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:'三'
        },
        // 計(jì)算屬性
        computed:{
            fullName:{
                //當(dāng)有人讀取fullName時(shí)，get就會(huì)被調(diào)用，返回值為fullName的值
                //get調(diào)用時(shí)機(jī)
                //1、初次讀取fullName
                //2、所依賴的數(shù)據(jù)變化時(shí)
                get(){
                    //這里的this是指vm
                    return this.fistName + this.lastName;
                },
                //當(dāng)fullName被調(diào)用時(shí)候調(diào)用
                set(value){
                    const arr = value.split('-')
                    this.fistName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })

計(jì)算屬性和方法的編寫方式有點(diǎn)區(qū)別

{{}}中方法是寫一個(gè)方法的，即帶括號(hào)
但是計(jì)算屬性只需要寫名字即可，不用帶花括號(hào)

計(jì)算屬性中要編寫兩個(gè)方法，一個(gè)是get方法，另一個(gè)是set方法

當(dāng)有人讀取fullname這個(gè)計(jì)算屬性，get方法就會(huì)被調(diào)用，返回值是fullname的值
當(dāng)有人修改fullname這個(gè)計(jì)算屬性，set方法就會(huì)被調(diào)用

當(dāng)明確只有g(shù)et方法，不需要set方法的時(shí)候，計(jì)算屬性可以簡(jiǎn)寫成如下：

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

get函數(shù)什么時(shí)候執(zhí)行：

初次讀取時(shí)會(huì)執(zhí)行一次
當(dāng)依賴的數(shù)據(jù)發(fā)生變化時(shí)會(huì)被調(diào)用一次

計(jì)算屬性的優(yōu)勢(shì)

相對(duì)于方法來(lái)說(shuō)，計(jì)算屬性內(nèi)部有緩存機(jī)制（復(fù)用），效率更好，調(diào)試更方便

簡(jiǎn)單來(lái)說(shuō)，倘若計(jì)算屬性不變，計(jì)算屬性的數(shù)據(jù)就會(huì)存進(jìn)緩存中，當(dāng)頁(yè)面上的其他數(shù)據(jù)需要讀取這個(gè)計(jì)算屬性的話，不再需要從vm獲取，直接從緩存里面獲取

二、監(jiān)視屬性

監(jiān)視屬性可以監(jiān)視某個(gè)屬性的變化，并且可以獲取變化前和變化后的數(shù)值

通過關(guān)鍵詞watch實(shí)現(xiàn)

<!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;
        },
      },
      // 監(jiān)視
      //適用于一開始很明確地知道要監(jiān)視誰(shuí)
      watch: {
        isHot: {
          //初始化時(shí)讓handler調(diào)用一下
          immediate: true,
          //什么時(shí)候調(diào)用？當(dāng)isHost發(fā)生改變時(shí)
          handler(newValue, oldValue) {
            console.log("isHost被調(diào)用", newValue, oldValue);
          }
        },
      // }
    });
  </script>
</html>

例如如上案例，當(dāng)isHost被修改的時(shí)候，監(jiān)視屬性中的isHost中的handler就會(huì)被調(diào)用

而 immediate: true 的作用是再初始化的時(shí)候調(diào)用一下這個(gè)監(jiān)視屬性

注意的是監(jiān)視屬性必須存在，才可以進(jìn)行監(jiān)視

除了以上邪惡寫法，還可以通過vm.$watch監(jiān)視

    vm.$watch("isHost", {
      //初始化時(shí)讓handler調(diào)用一下
      immediate: true,
      //什么時(shí)候調(diào)用？當(dāng)isHost發(fā)生改變時(shí)
      handler(newValue, oldValue) {
        console.log("isHost被調(diào)用", newValue, oldValue);
      },
    });

兩種的使用場(chǎng)合不同：

第一個(gè)則是，一開始就很明確這個(gè)屬性需要監(jiān)視，則寫在vue里面
第二個(gè)則是，一開始不知道這個(gè)屬性需要被監(jiān)視，然后后面加上的，就可以用vm.$watch

當(dāng)監(jiān)視屬性只有handler的時(shí)候，可以進(jìn)行簡(jiǎn)寫

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

三、深度監(jiān)視

深度監(jiān)視主要用于監(jiān)視層次比較高的

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

例如這個(gè)data里面的number，需要監(jiān)視里面的a和b的變化，則需要用到監(jiān)視屬性

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

監(jiān)視對(duì)象里面的某個(gè)屬性，就可以如上這也進(jìn)行操作，“對(duì)象.屬性”表示監(jiān)視里面的某一個(gè)屬性

同時(shí)也可以監(jiān)視number的變化，只需要在在里面開啟深度即可

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

監(jiān)視對(duì)象里面的某個(gè)屬性，就可以如上這也進(jìn)行操作，“對(duì)象.屬性”表示監(jiān)視里面的某一個(gè)屬性

同時(shí)也可以監(jiān)視number的變化，只需要在在里面開啟深度即可

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

到此這篇關(guān)于Vue計(jì)算屬性與監(jiān)視屬性實(shí)現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)Vue計(jì)算屬性與監(jiān)視屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: