1、计算属性
再vue中如果出现表达式过长或者逻辑比较复杂，这时会导致代码不清晰，臃肿，难以维护所以我们会使用计算属性进行书写
再计算属性中可以放负责的逻辑，可以是函数，表达式等，但最终会返回一个结果，再使用计算属性的时候只要数据变化，计算属性就会重新执行，
视图也就跟着重新发生变化
每一个计算属性都是用的是函数进行表示的，最终返回的是一个值
2、实现计算属性的方法
所有的计算属性都是以函数的形式写在vue实例中的computed内，最终返回的是计算之后的结果
对于计算属性来说，因为它本身返回的就是一个结果，一个值，所以很多情况下，直接作为内容输出到DOM即可，会自动的进行执行
因为计算属性最终返回的是一个值，所以很多情况下我们都是需要加上return的
3、computed是计算属性：在使用的时候返回的是一个值，都是作为函数来写的，在调用的时候直接写名字即可
methods是方法：在使用的时候本身就是一个函数，所以返回的也是函数，在调用的时候按照正常函数调用的方式进行调用才行
4、为什么在用methods的时候会自动更新：
因为在使用methods的时候，数据发生变化，组件就会重新更新，重新渲染，特点就是只要重新渲染了，那么methods中的函数就会被全部重新执行
5、使用computed不会自动刷新：
因为在使用computed的时候它是会产生缓存的，只有当数据改变的时候，才会重新计算，但是其他的计算属性是不会被执行的
所以在使用的时候计算属性要比methods方法更加的节省性能
如果是负责逻辑的话使用计算属性，执行的时候会直接从缓存中执行
<template>
<div id="app">
<p>{{reveiveMsg}}</p>
<p>{{clickA()}}</p>
<button @click="a++">按钮methods_a++</button>
<button @click="b++">按钮methods_b++</button>
<p>a:{{a}}</p>
<p>b:{{b}}</p>
<p> sum+a={{addA}}</p>
<p> sum+a={{addB}}</p>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
msg: '好好学习天天向上a' ,
isture: false,
isElseTrue:true,
a: 0,
b: 0,
sum: 20
}
},
methods: { //Imethod中写的是对事件处理的处理函数
clickA: function () {
return this.msg
},
addA: function () {
console.log("执行AA")
return this.a + this.sum
},
addB: function () {
console.log("执行BB")
return this.b + this.sum
}
},
computed: {
reveiveMsg: function () {
return this.msg
},
addA: function () {
console.log("执行AA")
return this.a + this.sum
},
addB: function () {
console.log("执行BB")
return this.b + this.sum
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.test{
color:skyblue;
}
</style>