Vue.js 计算属性

1.含义及用法

• 在html模版中绑定数据时，如果需要的数据不是简单的data中的数据，而是需要将一个或者多个数据计算之后得到的值，这时候就用用到计算属性
• 使用计算属性需要在vue实例的配置中添加computed属性，它的值为对象，对象里面的键值对就是一个个计算属性，key就是计算属性的名称，值是一个函数，这个函数最后会返回一个值

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello!'
  },
  computed: {
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

2.computed vs methods

• 计算属性一般作为一个数据绑定在html模版中，而methods一般用于事件监听时调用，虽然methods也能达到计算属性一样的效果，但是语义还是有区别的
• computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

3.get /set方法

一般计算属性的值默认是一个方法（get方法）,它只能根据所依赖的数据来决定计算的 结果，但是它不能根据结果来修改所依赖的数据。set方法就是为此而生的，一个计算属性可以同时解决取值和设置值的问题

使用方法：设置某个计算属性为一个对象，然后在里面为其设置get和set两个属性，get方法会返回 一个值，而set方法会给某个依赖的数据重新赋值

var vm = new Vue({
    el:'#app',
    data:{
        num:20
    },
    computed:{
        result:{
            get:function(){
                return this.num * 5;
            },
            set:function(value){
                this.num = value / 5;
            }
        }
    }
})

给计算属性取值就是调用get方法，例如:

// 20 * 5 = 100
<p>{{result}}</p>

console.log(vm.result) // 100

给计算属性赋值是调用set方法，例如:

<button @click="result=80">点我</button>
// 执行完毕后data中的num = 80 / 5 = 16

实例：

<div id="app">
    <input type="text" v-model="num">
    <span> * 5 = </span>
   <input type="text" v-model="result">
</div>

get-set.png

无论修改左边还是右边的输入框的值，另一边的输入框都会自动计算成相应的值