計(jì)算屬性

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

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

需求

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

需求一攬

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

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

自實(shí)現(xiàn)

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

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

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

準(zhǔn)備工作

html

<!-- 創(chuàng)建一個(gè)容器 -->
    <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就會(huì)被調(diào)用
• 因?yàn)関-model與input當(dāng)中的value進(jìn)行了雙向綁定
  • 所以當(dāng)期發(fā)生變化的時(shí)候，data當(dāng)中的full與name也會(huì)跟著變化
• 我們在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ā)生變化的時(shí)候，這個(gè)全名（userName），延遲一秒更新
• 不過這樣的話，那么就需要對full與name單獨(dú)監(jiān)視了

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

注意點(diǎn)

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

測試

在computed當(dāng)中書寫

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

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

//配置計(jì)算屬性
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
	  }
	 }
}

總結(jié)

computed與watch配置項(xiàng)

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

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

最新評論