Vue-computed计算属性

一.Vue中的计算属性:computed

　　顾名思义,用于计算,便于计算的属性,

　　疑问:但是为什么会出现计算属性呢,官方文档已经给出了答案,这里引用官方文档中的原文:　

　　　　模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

 　　　//未使用计算属性--在模板内计算
　　  　<div id="example">
 　　　　　　 {{ message.split('').reverse().join('') }}
　　　　</div>

　　　　在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。　

 　//使用计算属性
　　<div id="example">
 　　 <p>Original message: "{{ message }}"</p>
  　　<p>Computed reversed message: "{{ reversedMessage }}"</p>
　　</div>

   var vm = new Vue({
 　　 el: '#example',
 　　 data: {
  　　  message: 'Hello'
　　  },
 　　 computed: {
   　　 　　// 计算属性的 getter
    　　reversedMessage: function () {
     　　 // `this` 指向 vm 实例
     　　 return this.message.split('').reverse().join('')
   　　 }
  　　}
　　})

　　通俗来说使用计算属性有以下几点好处:

　　　　1.模板内适合简单的表达式,用于简单的运算,而不适合于复杂的运算,

　　　　2.如果需要在模板使用运算以后的数据,则代码的复用性变差

　　　　3.computed和motheds在某种程度上都能完成相同的事情,但是计算属性具有缓存的作用,如果计算属性中依赖的数据没变,则计算属性会得到保存

　　　　  而methods方法则不同,每当页面渲染的时候,methods方法会重新执行

二.计算属性的使用

　　计算属性的两种写法

computed: {
    //第一种写法
    noChildren: function() {
      return this.asideMenu.filter(item => !item.children)
    },
    //第二种写法
    hasChildren() {
      return this.asideMenu.filter(item => item.children)
    },
  }

三,计算属性的setter与getter方法

　　注意:计算属性默认只有getter,不过在需要时,也可以提供一个setter

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  computed: { 
　　fullName: { 
   // getter 
　　　　get: function () { 
　　　　　　return this.firstName + ' ' + this.lastName }, 
　　// setter 
　　　　set: function (newValue) { 
　　　　　　var names = newValue.split(' ') 
　　　　　　this.firstName = names[0] 
　　　　　　this.lastName = names[names.length - 1] 
　　} 
 } 
}

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName也会相应地被更新。