1、什么是计算属性
计算属性：可以理解为能够在里面写一些计算逻辑的属性。
作用：1）减少模板中的计算逻辑
2）数据缓存。当我们的数据没有变化时，不在执行计算的过程
3）依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局数据
2、计算属性和方法
值不是直接渲染到页面，也是通过计算之后再渲染到页面，可以使用计算属性computed
1）methods中的方法在模板中被调用，如果这个方法依赖data，data的值发生了变化，这个方法就会重新执行；计算属性也具备这个特性。保证data中数据与页面中显示的数据保持一致！
2） 计算属性计算出来的结果会被缓存起来，下次无需计算直接显示，而方法不是，每次调用都会重新执行。
3、修改计算属性的值
直接修改计算属性的值报错，Computed property "num2" was assigned to but it has no setter.在computed中定义get和set方法，在修改计算属性中的值
<template><div class="compute"> <p>修改计算属性的值</p><h4>num: <span v-text="num"></span></h4><h4>计算属性num2: <span v-text="num2"></span> </h4><button class="btn" @click="change">改变计算属性的值</button></div>
</template>
<script>
export default {name:'compute',data(){return{ num:100}},computed:{// num2不是函数num2:{// 当计算属性要修改时先触发set方法// 读取当前计算属性的值，get方法可以隐藏，默认进入的是get方法get:function(){return this.num*2-10},set:function(val){this.num = val;console.log('val',val)}}},methods:{ change(){// 直接修改计算属性的值报错，Computed property "num2" was assigned to but it has no setter.this.num2=60;}}
}
</script>
<style lang="less" scoped>
.compute{.btn{width: 130px;height: 37px;background: #fff;border-style: none;border: 1px solid #333;border-radius: 4px;&:hover{background: #42c5e6;color: #fff;}}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>计算属性</title><!-- 导入vue --><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body><div id="app"><!-- <p>{{message}}</p>//反转之后显示<p>{{ message.split("").reverse().join("") }}</p><p>{{ reverseMsg() }} </p><p>{{ reverseMsg() }} </p><p>{{ reverseMessage }} </p><p>{{ reverseMessage }} </p> --><!-- <ul><li v-for="item in users.filter(u=>u.gender=='male')">{{item}}</li></ul> --><button @click="gender='male'">男生</button><button @click="gender='female'">女生</button><ul><li v-for="item in userFilter">{{item}}</li></ul></div><script>new Vue({el:"#app",data:{message:"hello world",users:[{id:1,name:"terry",gender:"male"},{id:2,name:"larry",gender:"male"},{id:3,name:"vicky",gender:"female"},{id:4,name:"lucy",gender:"female"},{id:5,name:"tom",gender:"male"},],//默认值，默认情况显示男生gender:"male"},//computed是一个计算属性，调用里面的方法不用加过好，直接用reverseMessagecomputed:{reverseMessage(){console.log("computed-reverseMessage"+Math.random())return this.message.split("").reverse().join("")},//过滤//u=>u.gender===this.gender 箭头函数userFilter(){//当this.users以及this.gender发生变化的时候，计算属性会重新执行计算出新的结果然后渲染到页面中。return this.users.filter(u=>u.gender===this.gender)}},created(){setTimeout(()=>{this.message += "hello world"},2000)},methods:{reverseMsg(){console.log("methods-reverseMsg"+Math.random())return this.message.split("").reverse().join("")}}})</script>
</body>
</html>
