==计算属性在解决一些简单逻辑时是很有用的==
♦什么是计算属性？
能够对数据进行一些转换后再显示，或者须要将多个数据联合起来进行显示

计算属性关键词：computed

代码示例1

<div id="app">  {{ message.split('').reverse().join('') }}</div>

代码示例1中的模板很简单，且不容易看懂

代码示例2

<div id="app">  <p>原始字符串: {{ message }}</p>  <!--谬误用法（很容易出错的点，reversedMessage后不能加括号）-->  <!--<p>{{reversedMessage()}}</p>-->  <!--正确用法-->  <p>计算后反转字符串: {{ reversedMessage }}</p></div> <script>var vm = new Vue({  el: '#app',  data: {    message: 'Runoob!'  },  // 计算属性的 getter  computed: {    reversedMessage: function () {      // `this` 指向 vm 实例      return this.message.split('').reverse().join('')    }  }})</script>

代码示例2中申明了一个计算属性reversedMessage

提供的函数将用作属性 vm.reversedMessage 的 getter 。vm.reversedMessage 依赖 vm.message，在 vm.message 扭转时，vm.reversedMessage 也会随之扭转

computed和methods比照（理解）

computed和methods的成果一样，区别在于：

computed 是基于它的依赖缓存，只有相干依赖产生扭转时才会从新取值。（计算属性屡次应用，只会调用一次）
应用 methods ，在从新渲染的时候，函数总会从新调用执行。（methods执行几次，就调用几次，没有缓存）

代码示例3

<div id="app">  <!--1.间接拼接:语法过于繁琐-->  <h2>{{firstName}} {{lastName}}</h2>  <!--2.通过定义methods-->  <h2>{{getFullName()}}</h2>  <h2>{{getFullName()}}</h2>  <h2>{{getFullName()}}</h2>  <!--3.通过computed-->  <h2>{{fullName}}</h2>  <h2>{{fullName}}</h2>  <h2>{{fullName}}</h2></div><script src="../js/vue.js"></script><script>  const app = new Vue({    el: '#app',    data: {      firstName:'Lebron',      lastName:'James'    },    methods: {      getFullName() {        console.log('getFullName');//能够在浏览器控制台查看执行3次        return this.firstName + ' ' + this.lastName      }    },    computed:{      fullName:function(){        console.log('getFullName');//能够在浏览器控制台查看执行1次        return this.firstName+' '+this.lastName      }    }  })</script>

应用 computed 性能会更好，然而如果不心愿缓存，也能够应用 methods 属性。

计算属性的setter和getter

■每一个计算属性都蕴含一个getter和一个setter
■computed 属性默认只有 getter ，不过在须要时你也能够提供一个 setter

代码示例4

<div id="app">  <h2>{{fullName}}</h2></div><script src="../js/vue.js"></script><script>  const app = new Vue({    el: '#app',    data: {      firstName:'Kobe',      lastName:'Bryant'    },    computed:{     // fullName:function(){     //   return this.firstname+' '+this.lastName     // }     //name:'coderwhy'      //计算属性个别没有set办法，只读属性     fullName:{       set:function(newValue){         //console.log('----',newValue);         const names=newValue.split(' ');         this.firstName=name[0];         this.lastName=name[1];       },       get:function(){         return this.firstName+' '+this.lastName       }     },      //fullName:function(){      //  return this.firstName+' '+this.lastName      //}    }  })</script>

♦Tips

若单词显示如图波浪线，如果查看无误后并且今后还需持续应用该单词，咱们能够将该单词退出词库中

首先选中单词右击鼠标，抉择“show Context Actions”

下一步抉择“Save'Lebronb' to dictionary

最初该单词就被退出词库中，波浪线隐没