【Vue】计算属性computed

computed

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。当模板中不使用某个计算属性，即使该计算属性的条件发生改变，也不会走其computed

使用计算属性的情况：

1.在模板中放入太多的逻辑会让模板过重而且难以维护

2.某一个属性是根据多个属性取得

3.使用vuex中的数据不用加this.$store

computed的属性可以读取和设值。因此，在computed中可以分为getter(读取)和setter(设值)。

computed的getter函数

一般情况下，是没有setter的，computed只是预设了getter，也就是只能读取，不可以改变设值。所以，computed默认格式是不表明setter函数的

 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>

data: {
    message: 'Hello'
},
computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    },
    // 等同于下面
    reversedMessageActual: {
      get: function() {
        return this.message.split('').reverse().join('')
      }
    }
}　

computed中的setter函数

当赋值给计算属性的时候，将调用setter函数。但是赋值并不是直接改变计算属性，而是通过其getter方法中相应的属性去改变

<div>{{totalMarks}}</div>
<div>{{computedMsg}}</div>

data () {
    return {
      results: [
        { name: 'English', marks: 70 },
        { name: 'Math', marks: 80 },
        { name: 'History', marks: 90 }
      ],
      msg:'haha'
    }
  },
computed: {
    totalMarks(){
      let total=0
      for(let i=0;i<this.results.length;i++){
        total+=this.results[i].marks
      }
      return total
    },
    computedMsg:{
      get:function(){
        return this.msg
      },
      set:function(newVal){
        this.msg=newVal
      }
    }
  },
mounted () {
  this.computedMsg='??'
}