Vue監聽屬性圖文實例詳解

Posted on by

 什麼是監聽屬性？

🥰所謂監聽就是對內置對象的狀態或者屬性變化進行監聽並且做出反應的響應，監聽屬性，意思就是可以監視其他數據的變化。

監聽屬性和計算屬性的區別？

計算屬性是依賴的值改變後重新計算結果更新DOM，會進行緩存。

屬性監聽的是屬性值，當定義的值發生變化時，執行相對應的函數。

最主要的用途區別：

計算屬性不能執行異步任務。計算屬性一般不會用來向服務器請求或者執行異步任務，因為耗時可能會比較長，我們的計算屬性要實時更新。所以這個異步任務就可以用監聽屬性來做。

總之一句話：computed能實現的，watch都能實現，computed不能實現的，watch也能實現

監聽屬性的使用

使用watch配置項，在配置項裡面寫上要監視的屬性，每次屬性值的變化都會觸發handler函數回調，也可以監視計算屬性的變化。

例子：

監視輸入框的變化

代碼

<template>
<div class="main">
    我:<el-input v-model="name" placeholder="請輸入名字"></el-input>
    好友1<el-input v-model="friends.friend_1" placeholder="請輸入名字"></el-input>
    好友2<el-input v-model="friends.friend_2" placeholder="請輸入名字"></el-input>
</div>
</template>

<script>
export default {
  data(){
    return{
      name:'浪漫主義碼農',
      friends:{friend_1:'張三',friend_2:'李四'}
    }
  },
  watch:{
    name:{
      handler(newValue,oldValue){  //newValue 新的值，oldValue變化前的值
        console.log(newValue,oldValue)
        this.friends.friend_1='王五'
      }
    },
    //監視多級結構中某個屬性的變化
    'friends.friend_1':{
      handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    },
    'friends.friend_2':{
      handler(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    },
  }
};
</script>

深度監聽

當我們的對象有多層結構的時候，我們要監聽的對象的屬性很多，避免一個一個屬性單獨寫，這個時候用到深度監聽。

在watch配置中，監視屬性對象中，配置deep 設置為 true 用於監聽多級對象或者數組內部值的變化

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

註意：這裡有個問題，深度監聽時會出現新舊值相同的現象？

原因：

官方的解釋：

在變異(不是替換)對象或數組時，舊值將與新值相同，因為它們的引用指向同一個對象/數組。Vue不會保留變異之前值的副本

就是導致瞭指針的變化。在我的js深拷貝你還不會嗎 文章裡講到數據的存儲

立即調用

和deep配置的地方一樣。

immediate 設置為 true 將立即以觸發當前handler回調

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

在頁面加載的時候就執行瞭一次，所以舊數據為undefined

寫在最後

watch監聽屬性通常可以用在 數據持久化、派發事件並同步/異步執行，驗證格式…

到此這篇關於Vue監聽屬性的文章就介紹到這瞭,更多相關Vue監聽屬性內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：