29.Vue计算属性

什么是计算属性：

在模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于任何复杂逻辑，你都应当使用计算属性。

计算属性和方法区别：

尽管使用方法也能实现计算属性相同效果，但最明显的区别在于：计算属性是基于它们的依赖进行缓存的，只有相关依赖发生改变时它们才会重新求值。

案例：

<template>
  <div>
      {{messageCmp}}  <br/>
      <button @click="mclick">点击</button> <br/> <br/>
      {{message2Cmp}}
  </div>
</template>
<script>
export default {
  data(){
    return {
        message: '123,456,789'
    }
  },
  // 计算属性
  computed: {
    messageCmp(){
      console.log('messageCmp 被执行!');
      return this.message.split(',').reverse().join(','); //反转message值
    },
    // 提供 get set方法
    message2Cmp: {
      get(){
        console.log('message2Cmp get被执行!');
        return this.message2 += ' hello';
      },
      set(val){
         console.log('message2Cmp set被执行!');
         this.message = val;
      }
    }
  },
  methods: {
    mclick(){
       this.message = 'aa,bb,cc';
       this.message2Cmp = 'hello message2';
      console.log(this.message2Cmp );
    }
  }
  mounted(){}
}
</script>

一般情况下，计算属性不会使用到set，直接默认get ( messageCmp )方式返回处理后的值。