快捷導(dǎo)航

Vue中監(jiān)視屬性和計算屬性區(qū)別解析

更新時間：2022年10月28日 17:00:12 作者：瀾璨

這篇文章主要介紹了Vue中監(jiān)視屬性和計算屬性區(qū)別,通過本文學(xué)習(xí)大家知道computed與watch配置項問題，computed能完成的功能，watch都可以完成，本文通過實例代碼給大家詳細(xì)講解，需要的朋友可以參考下

計算屬性

顧名思義，計算屬性就是計算出來的屬性，英文名兒computed
這里要和data和methods里的東西區(qū)分，data里的屬性，methods里的函數(shù)，你寫的都會原封不動放到vm里，但是computed里面的東西寫的是對象，最后放到vm里的是這個對象的名，值是get里的返回值。

下面看下Vue中監(jiān)視屬性和計算屬性區(qū)別。

需求

我們將計算屬性的案例使用watch寫一遍

需求一攬

兩個輸入框
下方一個全名
要求輸入框內(nèi)容發(fā)生變化的時候，全名也跟著變化

使用watch實現(xiàn)

自實現(xiàn)

既然要使用深度監(jiān)視，那么我們就需要在data當(dāng)中準(zhǔn)備一個對象屬性

data:{
 // 全名
 fullname:{
    full:""
    name:""
},
userName:""
},

我們的深度監(jiān)視針對的就是這個fullName
我們在data當(dāng)中定義另一個變量userName，這個變量可以理解為計算屬性，但是這里我們不使用computed配置項

準(zhǔn)備工作

html

<!-- 創(chuàng)建一個容器 -->
    <form class="app">
        <input type="button" value="重置" @click="reset">
        <!-- 差值語法 == v-model -->
        <div class="box" >
            <div class="title">深度監(jiān)視</div>
            請輸入：<input type="text" v-model="fullName.full"><br>
            請輸入：<input type="text" v-model="fullName.name">
            <!-- 使用深度監(jiān)視 -->
            <div class="content">{{userName}}</div>
        </div>
    </form>

js

<script>
    var vm = new Vue({
      el: '.app',
      data: {
        // 全名
        fullName:{
            full:"",
            name:""
        },
        userName:""
      },
      methods:{
        // 清除fullName的值
        reset(){
            this.fullName.full = ""
            this.fullName.name = ""
        }
      },
      // 對fullName進行監(jiān)視
      watch:{
        fullName:{
            deep:true,
            handler(){ 
                this.userName = this.fullName.full + "-" + this.fullName.name
            }
        }
      }
      
    });
</script>

我們開啟了深度監(jiān)視，當(dāng)fullName的內(nèi)部值發(fā)生改變
那么handler就會被調(diào)用
因為v-model與input當(dāng)中的value進行了雙向綁定
- 所以當(dāng)期發(fā)生變化的時候，data當(dāng)中的full與name也會跟著變化
我們在fullName的深度監(jiān)視中能夠同步獲得data當(dāng)中已經(jīng)發(fā)生改變的full與name
在handler當(dāng)中將userName的值，對其進行加法運算

this.userName = this.fullName.full + "-" + this.fullName.name

我感覺這樣有點麻煩，看老師怎么做的吧

測試

新需求

當(dāng) 姓（full）發(fā)生變化的時候，這個全名（userName），延遲一秒更新
不過這樣的話，那么就需要對full與name單獨監(jiān)視了

// 對fullName進行監(jiān)視
      watch:{
        'fullName.full':{
            handler(newValue){
                // 新增一個定時器
                setTimeout(()=>{
                    this.userName = newValue + "-" + this.fullName.name
                },1000)
            }
        },
        'fullName.name':{
            handler(newValue){
                this.userName = this.fullName.full + "-" + newValue;
            }
        }
      }

注意點

setTimeout這個函數(shù)，是js模塊當(dāng)中定時器模塊所管理的一個函數(shù)
它的this是window
我們這個需求當(dāng)中，setTimeout是vue當(dāng)中，一個監(jiān)聽屬性的handler回調(diào)當(dāng)中的內(nèi)容
那么這個時候如果不寫成箭頭函數(shù)，那么this的指向就是window
但是寫了箭頭函數(shù)，那么setTimeout的this指向就沒有了
沒有怎么辦？往上一級找嘛，上一級是誰？handler嘛，handler的this是誰？vue嘛

測試

在computed當(dāng)中書寫

是不能夠通過異步請求來去維護數(shù)據(jù)的

這倆配置項各有千秋，但是我個人覺得watch來書寫這個需求的時候，會比較麻煩
關(guān)于計算屬性
- 在我確認(rèn)自己不需要對fullName這個整體進行修改的時候，那么我只需要一行代碼即可完成這個需求

//配置計算屬性
computed:{
    //完整寫法
    /* fullname:{...
    // 簡寫形式
    /*fullName:funaction(){...
    fullName(){
      return this.full + "-" + this.name
  }
}

關(guān)于監(jiān)視屬性
- 我得親自去監(jiān)視姓和名的變化，或者說進行深度監(jiān)視
- 然后在handler當(dāng)中去修改

// 對fullName進行監(jiān)視
watch:{
 fullName:{
     deep:true,
     handler(){
          this.userName = this.fullName.full + "-" +this.fullName.name
	  }
	 }
}

總結(jié)

computed與watch配置項

computed能完成的功能，watch都可以完成
watch能完成的功能，computed不一定能完成（參考異步）
典中典
- vue所管理的函數(shù)，最好寫成普通函數(shù)，因為this的指向是vue或組件實例對象，別人幫我們指定好了
- 所有不被vue所管理的函數(shù)（定時器回調(diào)，ajax回調(diào)），最好寫成箭頭函數(shù)
  - 這樣this的指向才能是 vm 或者組件實例對象，這樣才能向上查找，向上兼容

到此這篇關(guān)于Vue中監(jiān)視屬性和計算屬性區(qū)別的文章就介紹到這了,更多相關(guān)vue監(jiān)視屬性和計算屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: