【Vue系列3】—— Vue计算属性

酉时Coding课堂 2021-11-24

611

Vue是目前前端或者后端开发经常能用到的一个快速开发框架，本章节主要给小伙伴们介绍计算属性。

计算属性介绍

在模板中可以直接通过插值语法显示一些data中的数据，有些情况下我们需要对数据进行转化或者计算后显示，我们可以使用computed选项来计算，这时有些小伙伴可能就会问，我直接定义函数再调用不就行了，为什么还要整一个计算属性呢？这个问题在下边再做解释，我们先来看一下计算属性怎么用！

拼接名字案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 原始拼接方式 -->
      <p>{{fastName}} {{lastName}}</p>
      <!-- 在模板语法中进行计算 -->
      <p>{{fastName + " " + lastName}}</p>
      <!-- 调用函数计算 -->
      <p v-text="fullName2()"></p>
      <!-- 使用计算属性计算 -->
      <p>{{fullName1}}</p>
    </div>
  </body>
  <script type="text/javascript">
    var app = new Vue({
      el: "#app",
      data: {
        fastName: "Tracy",
        lastName: "McGrady"
      },
      computed: {
        fullName1: function(){
          return this.fastName + " " + this.lastName
        }
      },
      methods: {
        fullName2: function(){
          return this.fastName + " " + this.lastName
        }
      }
      
    })
</script>
</html>

运行结果

这里我们发现，计算属性的值和普通的查值语法计算出来的值是一样的，我们抱着【既然他们一样，有何区别】的疑问继续往下看第二个案例。

购物车价格统计案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{totalPrice}}</p>
    </div>
  </body>
  <script type="text/javascript">
    var app = new Vue({
      el: "#app",
      data: {
        bookes: [
          {id: 100,name: 'Unix编程艺术',price: 119},
          {id: 200,name: 'Java编程思想',price: 105},
          {id: 300,name: '高并发编程',price: 98},
          {id: 400,name: 'Spring5',price: 99},
        ]
      },
      computed: {
        totalPrice: function(){
          let result = 0;
          // 普通循环
          /* for(let i = 0;i < this.bookes.length;i++){
            result += this.bookes[i].price;
          } */
          
          // 增强for循环，i为索引
          /* for(let i in this.bookes){
            result += this.bookes[i].price;
          } */
          // ES6新增for循环直接获取对象
          for(let book of this.bookes){
            result += book.price
          }
          return result;
        }
      }
    })
</script>
</html>

运行结果就是在浏览器上显示出来商品的价格

以上两个案例供给各位练习和体验计算属性的用法，他的原理是什么？怎么实现的？他和我自己定义函数调用有什么区别，我们在下边为大家一一道来

getter和setter方法

那么首先登场的是我们的 geetter 和 setter 方法，如果您忘记或者不知道有这两个玩意，请将你们的老师拉出去祭天。

计算属性的完整写法其实是其中包含了getter和setter方法，声明一个fullName对象，因为我们一般只获取值，所以会将其省略写成上边案例的方式，我们在获取数据时会调用get方法，设置数据时会调用set方法。

给出原始的getter和setter方法，就问你周到不。

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{fullName}}</p>
    </div>
  </body>
  <script type="text/javascript">
    var app = new Vue({
      el: "#app",
      data: {
        firstName: "Tracy",
        lastName: "McGrady"
      },
      // 计算属性
      computed: {
        // 计算对象
        fullName:{
          // 设置数据
          set: function(){
            console.log('---');
          },
          // 获取数据
          get: function(){
            return this.firstName + " " + this.lastName;
          }
        }
      }
    })
</script>
</html>

计算属性的原理知道了就是getter和setter两个方法在这玩，我问什么要用它捏，有什么好处呢，接下来就是他的优势，也是招聘时会问的一道面试题

计算属性缓存

这里就来回答一下上边的methods和computed的区别的问题，下方代码分别使用插值语法、methods、计算属性来做数据渲染

Talk is cheap, show me the code!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 原始方式，该方式面对数据计算时比较繁琐，不推荐使用 -->
      <p>名字：{{name}} 工作：{{job}}</p>
      <!-- methods方式，每获取一次数据就调用一次函数 -->
      <p>{{getInfo1()}}</p>
      <p>{{getInfo1()}}</p>
      <p>{{getInfo1()}}</p>
      <p>{{getInfo1()}}</p>
      <!-- computed方式，当数据没有发生变化时，仅调用一次，会将数据进行缓存 -->
      <p>{{getInfo2}}</p>
      <p>{{getInfo2}}</p>
      <p>{{getInfo2}}</p>
      <p>{{getInfo2}}</p>
      <p>{{getInfo2}}</p>
    </div>
  </body>
  <script type="text/javascript">
    var app = new Vue({
      el: "#app",
      data: {
        name: "麦迪",
        job: "NBA球星"
      },
      methods: {
        getInfo1: function(){
          console.log("methods");
          return "名字：" + this.name + "工作：" + this.job;
        }
      },
      computed: {
        getInfo2: function(){
          console.log("computed");
          return "名字：" + this.name + "工作：" + this.job;
        }
      }
    })
</script>
</html>

在代码中做了输出，他们的计算结果必然是相同的，接下来请看图，就能知道他们的内在区别。

1、methods和computed看起来都能实现我们的功能

2、计算属性会进行缓存，如果多次使用时，计算属性只会调用一次

关于计算属性的介绍本章就到这里，他的核心就是会有缓存，多次计算仅会调用一次，您可以在项目中灵活运用啦。

数据库

文章转载自酉时Coding课堂，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

【Vue系列3】—— Vue计算属性

评论