眾所周知，vue專案中對資料的監聽，提供了一個很好的鉤子watch，watch可以極其方便的監聽我們常用資料型別值的變化，但通常當我們想監聽一個物件中，某個屬性值的變化時，很難達到我們預期的效果。根據vue的文件，不難發現，使用資料的深度監聽來達到這一效果。具體實現如下：

watch: {
   evlist: {
    handler(val,oldVal) {
     this.isTeam = val.projectParty;
     this.pjtid = val.pjtid;
     this.isFinish = val.projectSelfValue;
    },deep: true
   },},

這其中，evlist是一個物件，val監聽到變化後的值，oldVal是變化前的值。

補充知識：vue中的監聽屬性和計算屬性

計算屬性（computed）

vue中的計算屬性是非常棒的東西，它兼具了邏輯和變數。可以讓我們不再關注檢視層，值關注程式碼的邏輯即可。至於資料如何展現則只需由Vue負責，不需要我們的參與。

所以如果在面臨選擇是使用計算屬性還是監視屬性的情況下，優先選擇計算屬性

    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

export default {
    data(){
      return { 
        message: 'Hello',}
    },computed: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('');
      }
    }

可以看到我們使用的計算屬性替代了模板內表示式的功能。所以，對於任何複雜邏輯，你都應當使用計算屬性。而且計算屬性讓我們只關注於邏輯實現，至於後期的資料在介面上的表示形式則直接由Vue.js負責，讀者可以看到我們並沒有直接參與頁面展示上面來

此外，傳統的直接通過表示式求值的方式需要我們自行取值，而計算屬性是基於它們的依賴進行快取的。只在相關依賴發生改變時它們才會重新求值。也就是說，計算屬性會直接從快取拿值，並伴隨著值的改變而改變。而傳統的直接通過表示式求值的方式需要我們在拿值之前需要執行一次getter()函式

監聽屬性（watch）

監聽屬性其實質是一次非同步回撥，希望讀者在想到使用監聽屬性之前多考慮能否採用計算屬性來取代監聽屬性

對比同一個功能實現

//計算屬性
computed: {
    fullName2: function () {
       return this.firstName + ' ' + this.lastName
    }
}
//監聽屬性
watch: {
     firstName: function (val) {
        this.fullName = val + ' ' + this.lastName
    },lastName: function (val) {
        this.fullName = this.firstName + ' ' + val
    }
} 

可以看到計算屬性的程式碼更加簡潔也更加高效，而且就實現效果而言，明顯計算屬性會更好一點

以上這篇Vue專案中資料的深度監聽或物件屬性的監聽例項就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。