app直播源代码，vue2 实现简易购物车

默认监听

watch监听默认的是，值类型监听，只会监听数据值的变化，

当引用类型里面的任何一个值发生变化的时候，那么不会触发监听事件

<br>// 侦听器<br>   watch: {<br>     // 监听number属性<br>    // 值类型属性监听<br>    // number: function (newValue,oldValue){<br>  /* <br>  形参： newValue<br>   是数据改变后的值，<br>       形参:  oldValue<br>            是数据改变前的值<br>  */<br>  // console.log('number数据发生了变化');<br> //  console.log(newValue,oldValue);<br>   //  }<br>   "obj.number": function (newValue,oldValue){<br>     console.log(newValue,oldValue);<br>          }<br>   }

深度监听 handler

handler 当数据发生变化的时候，触发此函数

// 虽然开启了深度监听，能够监听到对象里面的值得变化

// 但是没有办法知道具体是哪一个值发生了变化

<br>//obj监听对象<br>obj: {<br>       handler: function (newValue){<br>       console.log(newValue);<br>  // handler 当数据发生变化的时候，触发此函数<br>  // console.log(123);<br>  // 虽然开启了深度监听，能够监听到对象里面的值得变化<br>  // 但是没有办法知道具体是哪一个值发生了变化<br>        },<br>  // 开启深度监听 默认为false<br>     deep: true<br>    }<br> 

computed计算

当需求的处理程度，过于复杂时，计算属性无非是我们更好的选择

计算属性会随着data数据的更新来更新计算属性的值

获取data的数据仍然以this开头

<br> computed: {<br>  // total: function <br>  // 当计算属性内写getter或者setter时 具体用法是<br>  /* <br>      属性: {<br>             // getter<br>               get: function (){<br>             // 这里是页面最终显示的数据  所有的数据处理在这里执行<br>           // 执行完成之后 仍然需要返回出去<br>                 return ‘值’<br>                        },<br>           // setter<br>           set: funciton (value){<br>     // 在计算属性进行修改的时候，会先触发setter属性，<br>     // 可以在这里进行数据的筛选等操作<br>       // set没有返回值<br>      // value就是操作的时候 赋予的值<br>                        }<br>                    }<br> */<br>  total: {<br>    get: function (){<br>   var count = 0;<br>   this.list.forEach(item => {count += item})<br>                        return count<br>                    },<br>        set: function (value){<br>     for (const key in value) {<br>    value[key] = Number(value[key])<br>                        }<br>                        this.list = value;<br>                    }<br>                }

以上就是app直播源代码，vue2 实现简易购物车，更多内容欢迎关注之后的文章