Vue中監(jiān)視屬性和計算屬性的區(qū)別是什么

這篇文章主要講解了“Vue中監(jiān)視屬性和計算屬性的區(qū)別是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue中監(jiān)視屬性和計算屬性的區(qū)別是什么”吧！

計算屬性

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

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

需求

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

需求一攬

• 兩個輸入框

• 下方一個全名

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

使用watch實(shí)現(xiàn)

自實(shí)現(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進(jìn)行監(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進(jìn)行了雙向綁定

• 所以當(dāng)期發(fā)生變化的時候，data當(dāng)中的full與name也會跟著變化

• 我們在fullName的深度監(jiān)視中能夠同步獲得data當(dāng)中已經(jīng)發(fā)生改變的full與name

• 在handler當(dāng)中將userName的值，對其進(jìn)行加法運(yùn)算

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

• 我感覺這樣有點(diǎn)麻煩，看老師怎么做的吧

測試

新需求

• 當(dāng) 姓（full） 發(fā)生變化的時候，這個全名（userName），延遲一秒更新

• 不過這樣的話，那么就需要對full與name單獨(dú)監(jiān)視了

// 對fullName進(jìn)行監(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;
            }
        }
      }

注意點(diǎn)

• 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)中書寫

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

• 這倆配置項各有千秋，但是我個人覺得watch來書寫這個需求的時候，會比較麻煩

• 關(guān)于計算屬性

• 在我確認(rèn)自己不需要對fullName這個整體進(jìn)行修改的時候，那么我只需要一行代碼即可完成這個需求

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

• 關(guān)于監(jiān)視屬性

• 我得親自去監(jiān)視姓和名的變化，或者說進(jìn)行深度監(jiān)視

• 然后在handler當(dāng)中去修改

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

感謝各位的閱讀，以上就是“Vue中監(jiān)視屬性和計算屬性的區(qū)別是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue中監(jiān)視屬性和計算屬性的區(qū)別是什么這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！