计算属性

概述

计算属性computed是vue实例的一个属性，它和methods的用法完全一样，一般如果我们要对数据进行一定的变通后显示的话，可以使用这个属性。

基本使用

<body>
  <!--
    假如我们想对数据进行一定的变更后显示
  -->
  <div id="app">
    <h2>{{firstName+' '+lastName}}</h2>
    <h2>{{firstName}} {{lastName}}</h2>
    <!--使用方法-->
    <h2>{{getFullName()}}</h2>
    <!--使用计算属性-->
    <h2>{{fullName}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        firstName: "Alen",
        lastName: "James"
      },
      methods: {
        getFullName: function () {
          return this.firstName+' '+this.lastName;
        }
      },
      computed: {
        fullName: function () {
          return this.firstName+' '+this.lastName;
        }
      }
    })
  </script>
</body>

复杂操作

<body>
  <div id="app">
    <h2>总价格：{{totalPrice}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        books: [
          {id: 1,name: "java编程思想",price: 78},
          {id: 2,name: "java核心技术卷1",price: 56},
          {id: 3,name: "java核心技术卷2",price: 98},
        ]
      },
      computed: {
        totalPrice: function () {
          let result=0;
          for (let i=0;i<this.books.length;i++){
            result=this.books[i].price+result;
          }
          return result;
        }
      }
    })
  </script>
</body>

计算属性的getter和setter

我们应该会想到一件事情，为什么computed和methods设置的方式一摸一样，可是使用上却不一样？因为计算属性的完整模样不是这样滴，计算属性其实包含

两个方法set和get，当修改计算属性时会调用set方法，当使用或者获取计算属性时就会调用get方法，不过计算属性一般很少使用set方法，所以就将它简写为前面的样子。

<body>
  <div id="app">
    <h2>{{fullName}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        firstName: "Jonhon",
        lastName: "Alen"
      },
      computed: {
        fullName: {
          set: function (newValue) {
            const names=newValue.split(' ');
            this.firstName=names[0];
            this.lastName=names[1];
          },
          get: function () {
            return this.firstName+' '+this.lastName;
          }
        }
      }
    })
  </script>
</body>

computed和methods的区别

我们知道，从语法上来说，computed和methods是完全一样的，那么它们的区别在哪呢？来看下面的代码

<body>
  <div id="app">
    {{fullName}}
    {{fullName}}
    {{fullName}}
    -----------
    {{getFullName()}}
    {{getFullName()}}
    {{getFullName()}}
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        firstName: "hh",
        lastName: "aa"
      },
      methods: {
        getFullName: function () {
          console.log("getFullName()");
          return this.firstName+" "+this.lastName;
        }
      },
      computed: {
        fullName: function () {
          console.log("fullName");
          return this.firstName+" "+this.lastName;
        }
      }
    })
  </script>
</body>

下面是控制台的输出

在这里插入图片描述

可以得见，fullName输出了一次，而getFullName()输出了3次，这是因为，计算属性computed是有缓存的，只要不改变firstName和lastName的值，不影响到计算属性的值，那么就不会再次调用方法进行计算；而methods的话每次使用都会调用方法，由此可见，computed的性能较好，所以如果对于计算那些不经常变更的数据，推荐使用computed。

下一篇：04-ES6语法、事件监听和条件判断

原文链接：https://blog.csdn.net/ilove_story/article/details/108905676