app直播原始碼，vue2 實現簡易購物車

app直播原始碼，vue2 實現簡易購物車

預設監聽

watch監聽預設的是，值型別監聽，只會監聽資料值的變化，

當引用型別裡面的任何一個值發生變化的時候，那麼不會觸發監聽事件

// 偵聽器
   watch: {
     // 監聽number屬性
    // 值型別屬性監聽
    // number: function (newValue,oldValue){
  /* 
  形參： newValue
   是資料改變後的值，
       形參:  oldValue
            是資料改變前的值
  */
  // console.log('number資料發生了變化');
 //  console.log(newValue,oldValue);
   //  }
   "obj.number": function (newValue,oldValue){
     console.log(newValue,oldValue);
          }
   }

 

深度監聽 handler

handler 當資料發生變化的時候，觸發此函式

// 雖然開啟了深度監聽，能夠監聽到物件裡面的值得變化

// 但是沒有辦法知道具體是哪一個值發生了變化

//obj監聽物件
obj: {
       handler: function (newValue){
       console.log(newValue);
  // handler 當資料發生變化的時候，觸發此函式
  // console.log(123);
  // 雖然開啟了深度監聽，能夠監聽到物件裡面的值得變化
  // 但是沒有辦法知道具體是哪一個值發生了變化
        },
  // 開啟深度監聽 預設為false
     deep: true
    }

computed計算

當需求的處理程度，過於複雜時，計算屬性無非是我們更好的選擇

計算屬性 會隨著data資料的更新來更新計算屬性的值

獲取data的資料 仍然以this開頭

 computed: {
  // total: function 
  // 當計算屬性內寫getter或者setter時 具體用法是
  /* 
      屬性: {
             // getter
               get: function (){
             // 這裡是頁面最終顯示的資料  所有的資料處理在這裡執行
           // 執行完成之後 仍然需要返回出去
                 return ‘值’
                        },
           // setter
           set: funciton (value){
     // 在計算屬性進行修改的時候，會先觸發setter屬性，
     // 可以在這裡進行資料的篩選等操作
       // set沒有返回值
      // value就是操作的時候 賦予的值
                        }
                    }
 */
  total: {
    get: function (){
   var count = 0;
   this.list.forEach(item => {count += item})
                        return count
                    },
        set: function (value){
     for (const key in value) {
    value[key] = Number(value[key])
                        }
                        this.list = value;
                    }
                }

 以上就是app直播原始碼，vue2 實現簡易購物車， 更多內容歡迎關注之後的文章