Vue学习总结（七）——计算属性

最新推荐文章于 2024-08-29 16:21:32 发布

原创最新推荐文章于 2024-08-29 16:21:32 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

Vue学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue中的计算属性，用于对数据进行转换或组合后显示。讨论了计算属性的基本使用，如简化模板中的数据结合，以及复杂计算场景。同时讲解了计算属性的setter和getter，虽然setter不常用，但提供了修改内部值的可能。最后比较了计算属性与methods的区别，指出计算属性因有缓存而具备更好的性能优势。

1、什么是计算属性

一般情况下在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来显示：

比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}}{{lastName}}

我们可以将上面的代码换成计算属性，计算属性是写在实例的computed选项中的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<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: 'kim',
        lastName: 'tian'
      },
      // 计算属性
      computed: {
        fullName() {
          return this.firstName + ' ' + this.lastName
        }
      },
      methods: {
        getFullName() {
          return this.firstName + ' ' + this.lastName
        }
      }
    })
  </script>
</body>
</html>

2、计算属性的复杂用法

不方便或者在mustache中计算不直观的情况下，使用计算属性。

Demo：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <!-- 使用计算属性的方式，不用加()-->
    <h2>{{totalPrice}}</h2>
    <h2>{{totalPrice2}}</h2>
    <h2>{{totalPrice3}}</h2>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        books:[
          { id: 1, name: "java编程思想", price: 138 },
          { id: 2, name: "大话数据结构", price: 68 },
          { id: 3, name: "计算机组成原理", price: 105 },
          { id: 4, name: "代码整洁之道", price: 158 },
        ]
      },
      // 计算属性
      computed: {
        // 常规的for循环
        totalPrice: function() {
          let result = 0
          for (let i = 0; i < this.books.length; i++) {
            result += this.books[i].price
          }
          return result
        },
        // ES6简单的for循环
        totalPrice2: function() {
          let result = 0
          for (let i in this.books) {
            result += this.books[i].price
          }
          return result
        },
        // ES6简单的for循环
        totalPrice3: function() {
          let result = 0
          for (let book of this.books) {
            result += book.price
          }
          return result
        }
      }
    })
  </script>
</body>
</html>

3、计算属性的setter和getter

每个计算属性都包含一个setter和getter，通常情况下我们只是试用getter来读取。在某些情况下，也可以提供一个setter方法，不常用。

如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2>{{fullName}}</h2>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'kim',
        lastName: 'tian'
      },
      // 计算属性
      computed: {
        fullName: {
          get: function() {
            return this.firstName + ' ' + this.lastName
          },
          set: function(newValue){
            console.log('-------', newValue);
            const names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[1];
          }
        }
      }
    })
  </script>
</body>
</html>

打开F12给fullName赋值：

可以看到页面显示的值被改变了。

4、计算属性和methods的对比

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <!--1、直接拼接: 语法过于繁琐，不要在html写过于繁琐的语法-->
    <h2>{{firstName}} {{lastName}}</h2>
    <!--2、通过定义methods-->
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <!--3、通过computed,计算属性是有缓存的，当内容没变化的时候，会读取缓存里面的值，性能更高。-->
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: 'kim',
        lastName: 'tian'
      },
      // 计算属性
      computed: {
        fullName: function() {
          console.log('fullName')
          return this.firstName + ' ' + this.lastName
        }
      },
      methods: {
        getFullName: function() {
          console.log('getFullName')
          return this.firstName + ' ' + this.lastName;
        }
      },
    })
  </script>
</body>
</html>

可以看到执行结果如下：methods每次使用都会被调用，计算属性当值没有变化时候只会调用一次，因为计算属性有缓存，所以相比于methods，性能会更高。