3.vue计算属性

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>