快捷導(dǎo)航

詳解Vue的監(jiān)聽屬性

更新時(shí)間：2021年11月24日 15:58:05 作者：浪漫主義碼農(nóng)

這篇文章主要為大家介紹了Vue的監(jiān)聽屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

Vue監(jiān)聽屬性

什么是監(jiān)聽屬性？

所謂監(jiān)聽就是對(duì)內(nèi)置對(duì)象的狀態(tài)或者屬性變化進(jìn)行監(jiān)聽并且做出反應(yīng)的響應(yīng)，監(jiān)聽屬性，意思就是可以監(jiān)視其他數(shù)據(jù)的變化。

監(jiān)聽屬性和計(jì)算屬性的區(qū)別？

計(jì)算屬性是依賴的值改變后重新計(jì)算結(jié)果更新DOM，會(huì)進(jìn)行緩存。

屬性監(jiān)聽的是屬性值，當(dāng)定義的值發(fā)生變化時(shí)，執(zhí)行相對(duì)應(yīng)的函數(shù)。

最主要的用途區(qū)別：

計(jì)算屬性不能執(zhí)行異步任務(wù)。計(jì)算屬性一般不會(huì)用來(lái)向服務(wù)器請(qǐng)求或者執(zhí)行異步任務(wù)，因?yàn)楹臅r(shí)可能會(huì)比較長(zhǎng)，我們的計(jì)算屬性要實(shí)時(shí)更新。所以這個(gè)異步任務(wù)就可以用監(jiān)聽屬性來(lái)做。

總之一句話：computed能實(shí)現(xiàn)的，watch都能實(shí)現(xiàn)，computed不能實(shí)現(xiàn)的，watch也能實(shí)現(xiàn)

監(jiān)聽屬性的使用

使用watch配置項(xiàng)，在配置項(xiàng)里面寫上要監(jiān)視的屬性，每次屬性值的變化都會(huì)觸發(fā)handler函數(shù)回調(diào)，也可以監(jiān)視計(jì)算屬性的變化。

在這里插入圖片描述

例子：

監(jiān)視輸入框的變化

在這里插入圖片描述

代碼

<template>
<div class="main">
    我:<el-input v-model="name" placeholder="請(qǐng)輸入名字"></el-input>
    好友1<el-input v-model="friends.friend_1" placeholder="請(qǐng)輸入名字"></el-input>
    好友2<el-input v-model="friends.friend_2" placeholder="請(qǐng)輸入名字"></el-input>
</div>
</template>
<script>
export default {
  data(){
    return{
      name:'浪漫主義碼農(nóng)',
      friends:{friend_1:'張三',friend_2:'李四'}
    }
  },
  watch:{
    name:{
      handler(newValue,oldValue){  //newValue 新的值，oldValue變化前的值
        console.log(newValue,oldValue)
        this.friends.friend_1='王五'
      }
    },
    //監(jiān)視多級(jí)結(jié)構(gòu)中某個(gè)屬性的變化
    'friends.friend_1':{
      handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    },
    'friends.friend_2':{
      handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    },
  }
};
</script>

深度監(jiān)聽

當(dāng)我們的對(duì)象有多層結(jié)構(gòu)的時(shí)候，我們要監(jiān)聽的對(duì)象的屬性很多，避免一個(gè)一個(gè)屬性單獨(dú)寫，這個(gè)時(shí)候用到深度監(jiān)聽。

在watch配置中，監(jiān)視屬性對(duì)象中，配置deep 設(shè)置為 true 用于監(jiān)聽多級(jí)對(duì)象或者數(shù)組內(nèi)部值的變化

 watch:{
    //監(jiān)視多級(jí)結(jié)構(gòu)中所有屬性的變化
    friends:{
      handler(newValue,oldValue){
        console.log(newValue,oldValue,"aa")
      },
      deep:true, //開啟深度監(jiān)聽
    }
  }

在這里插入圖片描述

注意：這里有個(gè)問(wèn)題，深度監(jiān)聽時(shí)會(huì)出現(xiàn)新舊值相同的現(xiàn)象？

官方的解釋：

在變異(不是替換)對(duì)象或數(shù)組時(shí)，舊值將與新值相同，因?yàn)樗鼈兊囊弥赶蛲粋€(gè)對(duì)象/數(shù)組。Vue不會(huì)保留變異之前值的副本

就是導(dǎo)致了指針的變化。在我的js深拷貝你還不會(huì)嗎文章里講到數(shù)據(jù)的存儲(chǔ)

立即調(diào)用

和deep配置的地方一樣。

immediate 設(shè)置為 true 將立即以觸發(fā)當(dāng)前handler回調(diào)

  watch:{
    name:{
      handler(newValue,oldValue){  //newValue 新的值，oldValue變化前的值
        console.log(newValue,oldValue)
        this.friends.friend_1='王五'
      },
      immediate:true
    },
  }

在頁(yè)面加載的時(shí)候就執(zhí)行了一次，所以舊數(shù)據(jù)為undefined

在這里插入圖片描述