computed 用于定义计算属性,
    计算属性不需要参数,数据来源于this

    1. <body>
    2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    3.     <div id='myApp'>
    4.         <h3>购物车商品总价</h3>
    5.         <ol>
    6.             <li>使用自定义函数计算: {{myPrice1(shopCar)}}</li>
    7.             <li>使用过滤器计算: {{shopCar | myPrice2}}</li>
    8.             <li>使用计算属性计算: {{myPrice3}} </li>
    9.             <li>计算属性的用法和data中的字段一样, 区别是: data中的字段是可读可写的, 而计算属性是只读的,不能直接手动修改, 只能通过修改data中的数据源使计算属性更新 </li>
    10.             <li>计算属性和过滤器/自定义函数的最大区别是: 计算属性调用多次不会重复计算,只会计算一次, 更节省性能消耗, 只有和它相关的数据源变化时才会重新计算结果</li>
    11.             <li>
    12.                 {{myPrice1(shopCar)}}-
    13.                 {{myPrice1(shopCar)}}-
    14.                 {{myPrice1(shopCar)}}-
    15.                 {{shopCar | myPrice2}}-
    16.                 {{shopCar | myPrice2}}-
    17.                 {{shopCar | myPrice2}}-
    18.                 {{myPrice3}}-
    19.                 {{myPrice3}}-
    20.                 {{myPrice3}}
    21.             </li>
    22.         </ol>
    23.     </div>
    24.     <script>
    25.         new Vue({
    26.             el: '#myApp',
    27.             data: {
    28.                 shopCar: [
    29.                     {name:'iphone13', price: 5999, count: 2},
    30.                     {name:'袜子', price: 3, count: 30},
    31.                     {name:'屏幕抹布', price: 149, count: 5}
    32.                 ]
    33.             },
    34.             // computed 用于定义计算属性, 
    35.             computed:{
    36.                 // 计算属性不需要参数,数据来源于this
    37.                 myPrice3(){
    38.                     console.log("myPrice3")
    39.                     var all = 0
    40.                     this.shopCar.forEach(item => {
    41.                         all += item.price * item.count;
    42.                     });
    43.                     return all;
    44.                 }
    45.             },
    46.             filters:{
    47.                 myPrice2(carList){
    48.                     console.log("myPrice2")
    49.                     var all = 0
    50.                     carList.forEach(item => {
    51.                         all += item.price * item.count;
    52.                     });
    53.                     return all;
    54.                 }
    55.             },
    56.             methods: {
    57.                 myPrice1(carList){
    58.                     console.log("myPrice1")
    59.                     var all = 0
    60.                     carList.forEach(item => {
    61.                         all += item.price * item.count;
    62.                     });
    63.                     return all;
    64.                 }
    65.             },
    66.             created() {
    67.                 console.log(this.shopCar, this.myPrice3);
    68.                 setTimeout(() => {
    69.                     this.shopCar[0].count = 1;
    70.                 }, 1000);
    71.             },
    72.         })
    73.     </script>
    74. </body>