vue.js学习——计算属性

一、为什么会有计算属性

在vue项目中遇到这样的情况，绑定的表达式需要经过复杂的逻辑，而这个表达式依赖于当前vue实例的数据属性，这个时候用计算属性，从而变的更清晰。

<div id="app">
  <p> {{ reversedText}}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
   text:'hello world!'
  },
  computed: {
    // 计算属性的 getter函数
    reversedText: function () {
      // `this` 指向 vm 实例
      return this.text.split('').reverse().join(' ');
    }
  }
})
</script>

二、什么是计算属性呢

在计算属性里，可以完成很多复杂的逻辑，比如函数的调用、运算等，最终只返回一个结果。总结一下计算属性的特点：

1、计算属性依赖一个或者多个vue实例中的数据属性

2、任意一个数据属性发生变化，计算属性便会重新计算，从而更新视图

关于计算属性的深层：

可以看到上面例子中，注释里面提到计算属性的getter函数，其实每个计算属性都包含一个getter和setter，我上述例子中使用的是计算属性的默认用法，只有getter函数。当手动修改计算属性的值的时候，就会触发setter函数，进行一些自定义的操作。

<div id="app">
  <p>firstName: {{ firstName}}</p>
  <p>lastName: {{ lastName}}</p>
  <p>fullName: {{ fullName}}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe!'
  },
  computed: {
    // 计算属性的 getter
    fullName:{

       getter:function () {
         return this.firstName + ' '+ this.firstName;
       },
       setter:function (value) {
         var names = value.split(' ');
         this.firstName = names[0];
         this.lastName = names[names.length-1];
       }
    } 
  }
})
</script>