前端VUE2.5：如何對某個對象的一個屬性進行watch監聽？

舉例以下所示：

formatAmount()方法爲金額千分位格式化函數：如200000.00 格式化爲：200,000.00 金額千分位格式化函數

第一種解決方案或者思路：

若是隻須要監聽對象中的一個屬性的狀況下：

• 能夠經過computed:做爲中間層，當對象newAddData.ticketAmountTotal屬性發生變化大時候， 對實時計算獲得的ticketAmountTotal，進行watch監聽, 當實例對象中的ticketAmountTotal發生改變的時候，執行handler(newValue,oldValue)函數;

經過computed:做爲中間層進行監聽；

example.vue:

<template>
 <div>
  <span style="display: inline-block;width:235px;text-align: center">金額:{{formatTicketAmount }}元 </span>
 </div>
 </template>
 
 <scritp>
  export default {
 data(){
     return{
         newAddData:{
             ticketAmountTotal:20000.00
         }，
         formatTicketAmount:"0"
     }
 }
     computed:{
         ticketAmountTotal(){
      return this.newAddData.ticketAmountTotal;
    },
     },
       watch: {
        ticketAmountTotal: {
          handler(newValue, oldValue) {
            console.log(newValue);
            console.log(oldValue);
            this.formatTicketAmount = commonFun.formatAmount(newValue);
          },
          deep: true
        },
    }
 }
 
 </script>
複製代碼

第二種解決方案/思路

deep屬性

• 當須要監聽一個對象的改變時，普通的watch方法沒法監聽到對象內部屬性的改變，只有data中的數據纔可以監聽到變化，此時就須要deep屬性對對象進行深度監聽
• 設置deep: true 能夠監聽到newAddData.ticketAmountTotal屬性的變化，此時會給newAddData的全部屬性都加上這個監聽器，當對象屬性較多時，每一個屬性值的變化都會執行handler。若是隻須要監聽對象中的一個屬性值，則能夠作如下優化：使用字符串的形式監聽對象屬性：

全部屬性都進行監聽

example.vue: **全部屬性都進行監聽**
     
     <template>
     <div>
      <span style="display: inline-block;width:235px;text-align: center">金額:{{formatTicketAmount }}元 </span>
     </div>
     </template>
     
     <scritp>
      export default {
     data(){
         return{
             newAddData:{
                 ticketAmountTotal:20000.00
             }，
             formatTicketAmount:"0"
         }
     }

           watch: {
            newAddData: {
              handler(newValue, oldValue) {
                console.log(newValue);
                console.log(oldValue);
                this.formatTicketAmount =commonFun.formatAmount(newValue.ticketAmountTotal) ;
              },
              deep: true
            },
        }
     }
     
     </script>
複製代碼

使用字符串的形式監聽指定對象屬性

example.vue:**使用字符串的形式監聽對象屬性**：
   
     <template>
     <div>
      <span style="display: inline-block;width:235px;text-align: center">金額:{{formatTicketAmount }}元 </span>
     </div>
     </template>
     
     <scritp>
      export default {
     data(){
         return{
             newAddData:{
                 ticketAmountTotal:20000.00
             }，
             formatTicketAmount:"0"
         }
     }

           watch: {
            'newAddData.ticketAmountTotal': {
              handler(newValue, oldValue) {
                console.log(newValue);
                console.log(oldValue);
                this.formatTicketAmount = commonFun.formatAmount(newValue);
              },
              deep: true
            },
        }
     }
     
     </script>
複製代碼