计算属性(computed)详解

什么是计算属性呢？
就是一个基于现有的属性，计算出一个新的属性，依据属性的变化，自动更新。
比如 现在有一个购物车数组，我们可以新增商品以及数量，我们就可以通过计算属性计算出总价。
语法：

1. 申明再computed配置项中，一个属性对应一个函数。
2. 使用起来和普通的属性一样{{ 计算属性名 }}

下面是一段代码示范，和效果截图：

    <div id="box">
        <ul>
            <li v-for="(item,index) in list">
                商品: {{item.name }} 
                价格：{{item.price}}
                数量：<button @click="item.num--">-</button> 
                    {{item.num}} 
                    <button @click="item.num++">+</button>
            </li>
        </ul>
        总价:{{ pricesum }}
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
   
            el:"#box",
            data:{
                list:[
                    {id:1,name:"薯片",num:0,price:5.0},
                    {id:1,name:"可乐",num:0,price:3.0},
                    {id:1,name:"汉堡",num:0,price:15.0}
                ]
            },
            computed:{
                pricesum(){
                    return this.list.reduce((sum,item)=>sum+item.price*item.num,0)
                }
            }
        })    
    </script>

computed计算属性 与 methods的区别：

通过示范代码不难看出，其实感觉和在motheds里面写方法大差不多，没有区别，看起来确实是这样，但是区别还是有的，比如我们把刚才的示范代码改为motheds里面变成方法调用来计算总价，稍微做些代码改变。试试效果：

可以看到控制台输出这里是触发了两次这个methods里面的方法，因为我们在总价那里有两个调用嘛。那再改回使用computed试试呢？

可以看到即便是两次使用计算属性,在数据没有发生改变的情况下，也只调用一次，所以得出
结论：
计算属性有缓存特性(提升性能)计算属性会对计算出来的结果进行缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算，并且再次缓存。

计算属性的完整写法

那么计算属性既然是一个属性，那是不是可以通过this.计算属性 = xxx给计算属性赋值修改呢？
当然没问题，只不过，要把计算属性写全了，也就是说之前我们写的都是拿计算属性，但是没有写自己修改的方法。
所以下面是一个完整的计算属性的示范代码:

 <div id="box">
        <!-- x是姓 y是名称 name是计算属性把他们拼接在一起 -->
       姓<input v-model="x">名<input v-model="m"> = {{name}}<br>
       <!-- 添加enter键触发的方法fun 进行改名 -->
       改名:<input @keyup.enter="fun" v-model="newname">
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#box",
            data:{
                newname:"",
                x:"李",
                m:'白'
            },
            methods:{
                fun(){
                    //将上面输入的newname的值赋值给计算属性
                    this.name = this.newname
                }
            },
            computed:{
                name:{
                    //get就是拿，写我们拿计算属性的逻辑代码。姓+名=计算属性
                    get(){
                        return this.x+this.m
                    },
                    //设置计算属性的方法，通过字符串分割将 姓 与 名 分割出来
                    set(value){
                        this.x = value.slice(0,1)
                        this.m = value.slice(1)
                    }
                }
            }
        }) 
    </script>

通过在上面的改名框输入周杰伦 ，敲回车触发方法fun()，将输入的 周杰伦 设置给计算属性，
设置计算属性需要在我们 的 计算属性的 set() 方法中写设置的逻辑，在把姓和名分割出来分别赋值给属性 ‘x’ 和 ‘m’。就是设置计算属性的流程。

效果图：

所以计算属性又有 简写 和 完整写法：
简写： 只配置了获取计算属性的方法，无法设置修改计算属性。就是只有 get()

完整写法： 在 get() 中写获取计算属性的逻辑，在 set() 中写设置修改计算属性的逻辑。