计算属性

什么是计算属性

一般我们可以在模版中直接通过插值语法显示一些data中的数据。但是在某些情况下，需要对数据进行一些转化后再显示，或者将多个数据结合起来进行显示，如firstName和lastName两个变量，需要显示完整的名称，但是如果多个地方都需要显示完整的名称，我们就需要写多个firstName和lastName。那么我们就可以将起那面的代码换成计算属性。

计算属性的简单操作

 <div id="app">
   <!--Mustache写法-->
   <h2>{{firstName}} {{lastName}}</h2>

   <!--计算属性-->
   <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
       }
     }
   })
 </script>

计算属性的复杂操作

  <div id="app">
    <h2>总价格：{{tolPrice}}</h2>
  </div>
    <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        books: [
          {id: 110,name: 'Unix入门',price: 124},
      {id: 111,name: 'Java入门',price: 221},
      {id: 112,name: 'Vue入门',price: 167},
      {id: 113,name: '计算机入门',price: 335}
    ]
  },
  computed:{
    tolPrice: function () {
      // return this.books[0].price + this.books[1].price + this.books[2].price + this.books[3].price
      let result = 0
      for(let i=0;i < this.books.length;i++){
        result += this.books[i].price
      }
      return result
    }
  }
})
  </script>

计算属性的setter和getter

  <div id="app">
    <h2>{{fullName}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好啊！",
        firstName: "Allen",
        lastName: "Iverson"
      },
      computed: {
        fullName: function () {
          return this.firstName + ' ' + this.lastName;
        }
    }
    })
  </script>

上面的代码中有的人会有这样的问题，fullName是个函数，为什么引用时没有加()呢，下面我们来看看计算属性内部到底是什么样的

  computed: {
    // fullName: function () {
    //   return this.firstName + ' ' + this.lastName;
    // }
    fullName: {
      set: function (newValue) {
        console.log("-------",newValue);
        const name = newValue.split(" ");
        this.firstName = name[0];
        this.lastName = name[1];
      },
      get: function () {
        return this.firstName + ' ' + this.lastName;
      }
    }
  }

上面便是计算属性未简化的代码，可以看出fullName就是个属性，其内部有set和get方法。又因为计算属性一般是没有set方法的，是个只读属性，所以就可以简写成上面注释中的代码。

计算属性的缓存

现在凭借名字有三种方法

data: {
    firstName: "Allen",
    lastName: "Iverson"
},

- 直接拼接

<h2>{{firstName}} {{lastName}}</h2>

- methods方法

<h2>{{getFullName()}}</h2>
methods:{
      getFullName: function () {
      return this.firstName + " " + this.lastName
    }
  }

- computed计算属性

<h2>{{fullName}}</h2>
computed: {
    fullName: function () {
      return this.firstName + " " + this.lastName
  }
 }

计算属性和methods方法的区别：在不改变前后名字的情况下，当我们多次使用全名时，methods方法每使用一次就会返回一次。但是计算属性不管使用几次，都只会返回一次。只有当前后名改变时，计算属性才会重新执行函数。