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 实现简易购物车， 更多内容欢迎关注之后的文章