第十六篇 Computed 计算属性的应用

        本篇内容主要讲计算属性的相关知识，如果从之前的有一直关注这一系列的文章内容的话，就会发现之前的一些案例可以用其他方法方式去做，比如 第八篇、第九篇 所提及到的模糊查询以及 第十四篇 实现购物车页面的一些内容；那么本篇就计算属性结合之前所讲的内容做新的讲解，希望大家能够有所提升，那么，先来一个简单的例子：

computed

        在页面当中使用表达式会非常的遍历，但如果逻辑太多反而会使得模板更加难以维护，下面来一个简单的例子感受一下，会发现在 {{}} 中编写的内容较多，这么写并没有问题，如果写一些比较简单的逻辑较好，多了会导致模板过重，不利于维护；

<div id="app">
    {{msg.toUpperCase()+' / '+msg.substring(8,22).toUpperCase()}}
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            msg:'what do you want to be?'
        },
    })
</script>

那么Computed就是解决这种问题的，对于任何复杂逻辑，你都应当使用计算属性；

<div id="app">
    {{msgComputed}}
</div>
<script>
...
 computed:{
     msgComputed(){
         return this.msg.toUpperCase()+' / '+ this.msg.substring(8,22).toUpperCase()
     }
...
</script>

 这样页面就只有 {{msgComputed}} ，看起来就比之前页面的写了较多逻辑 "清爽" 的多； 那么我去改变data中 msg 的值，依赖computed计算属性的值也会发生改变； 

methods

        使用计算属性 {{msgComputed}} 是不是感觉跟之前讲的一个内容相似，就是 第十篇事件处理中的函数表达式；不清楚的可以回去翻一下，用函数表达式来完成上面的例子；

<div id="app">
    {{msgMethods()}}
</div>
<script> ...
    methods:{
            msgMethods(){
                return this.msg.toUpperCase()+' / '+ this.msg.substring(8,22).toUpperCase()
            }
    } ...
</script>

        同样可以完成这样的操作，那么这两种之间（computed和methods）的区别又是什么的？

computed 和 methods的区别

computed：注重结果
    1.逻辑运算，防止模板过重，有缓存
    2.监听：依赖修改，get方法必须return
methods：
    1.点击事件处理函数，return不是必须的
    2.函数表达式的逻辑处理，没有缓存

下面来一个简单的例子，对比区别：

<div id="app">
    <!-- computed -->
    <p>计算属性</p>
    {{sumCpt}}  {{sumCpt}}  {{sumCpt}}
    <!-- methods -->
    <p>函数方法</p>
    {{sumMts()}}  {{sumMts()}}  {{sumMts()}}
</div>

<script>
    new Vue({
        el:'#app',
        data:{num:1},
        computed:{
            sumCpt(){
                console.log("计算属性执行");
                return this.num + this.num 
            }
        },
        methods:{
            sumMts(){
                console.log("函数方法执行")
                return this.num + this.num
            }
        }
    })
</script>

computed 计算属性具有缓存性，避免每次获值时重新计算；

computed 模糊查询

        在 第九篇函数表达式 中用函数表达式完成的模糊查询，那么现在讲了computed的内容，用computed的方法来进行修改案例；

第九篇代码片段：

<div id="app">
    <input type="text" v-model="mytext" />
	<ul>
		<li v-for="item in mymethod()">{{item}}</li>
    </ul>
</div>

<script>
    ...
		methods:{
			mymethod(){
				return this.list.filter(item=>item.includes(this.mytext))
			}
		}
    ...
</script>

修改后：

<div id="app">
    <input type="text" v-model="mytext" />
	<ul>
		<li v-for="item in mycomputed">{{item}}</li>
    </ul>
</div>

<script>
    ...
		methods:{
			mycomputed(){
				return this.list.filter(item=>item.includes(this.mytext))
			}
		}
    ...
</script>

computed 购物车页面

        下面是用这个computed来修改之前讲过的购物车页面， 如果没有看过的，可以看一下，这里就不过多的进行代码的赘述了，附链接：第十四篇 表单控件 - 购物车页面

        购物车页面当中的 "总计" 功能是用到函数表达式的形式完成，下面通过computed计算属性来进行操作；

原部分代码：

<div id="app">
    <p>总计：￥<span>{{sum()}}</span></p>
</div>
<script>
    ...
    methods:{
        sum(){
           // 商品单价 * 数量 = 商品总价  总计：各商品总价
			var total = 0
			this.goodsList.forEach(goods=>{
				total += goods.g_price * goods.g_number
			})
			return total}
    }
    ...
</script>

修改后：

<div id="app">
    <p>总计：￥<span>{{sum}}</span></p>
</div>
<script>
    ...
    computed:{
        sum(){
           // 商品单价 * 数量 = 商品总价  总计：各商品总价
			var total = 0
			this.goodsList.forEach(goods=>{
				total += goods.g_price * goods.g_number
			})
			return total}
    }
    ...
</script>

计算属性中的 getter / setter

        计算属性当中默认只有getter，需要时可以提供一个setter；那么计算属性能够返回结果，通过v-model绑定的isAllChecked来觉得是否为全选；设置isAllChecked会影响input中的checkbox勾选状态，如果返回isAllChecked的值为true的话，则checkbox也为true；那么与此同时的checkbox的值也影响着isAllChecked是否需要触发全选，那么计算属性当中就需要被赋值。

 勾选状态：是否勾选，勾选是否触发全选

修改：去掉methods的函数方法，直接用计算属性操作；

computed:{
    isAllCheackComputed:{
        set(isChecked){
            if(isChecked){
                this.checkGroup = this.list
            }else{
                this.checkGroup = []
            }
        },
        get(){
            return this.checkGroup.length === this.list.length
        }
    }
}

        那么通过以上对computed的讲解可以知道computed和methods的不同以及在什么情况之下应用 computed ，这篇内容讲到这里，紧接着下篇内容将讲到侦听器以及讲述computed，methods与watch的区别！