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>