Vue.js学习笔记——3.计算属性computed的使用

最新推荐文章于 2024-10-14 14:43:08 发布

土拨鼠的忧伤丶

最新推荐文章于 2024-10-14 14:43:08 发布

阅读量640

点赞数 3

分类专栏： Vue.js学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/DDDDDecade/article/details/109853415

版权

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

17 篇文章 2 订阅

订阅专栏

计算属性computed的使用

一、计算属性的基本操作
二、计算属性的复杂操作
三、计算属性的setter和getter
四、计算属性和methods的对比

一、计算属性的基本操作

我们可以利用插值语法来显示data中的数据，但在某些情况，我们可能需要对数据进行一些转化或多个数据结合起来进行显示，如：

data中有firstName和lastName两个属性，需要结合成fullName进行显示

单纯使用插值语法会让代码语法十分繁琐，这时我们就可以使用计算属性computed
举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!-- 插值语法 -->
  <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:"Lebron",
      lastName:"James"
    },
    computed:{
      fullName:function () {
        return this.firstName + ' ' + this.lastName
      }
    },
    methods:{
      getFullName:function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>
</body>
</html>

执行结果：
计算属性基本操作
计算属性一般直接当作一个属性使用，在命名时相比较methods一般不取动词，并且计算属性在使用时后面不需要加（）

二、计算属性的复杂操作

举例：将books数组中每个对象内的price相加再输出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      books:[
        {id:110,name:'高等数学',price:100},
        {id:111,name:'线性代数',price:130},
        {id:112,name:'概率论与数理统计',price:125},
        {id:113,name:'微积分与数学模型',price:95}
      ]
    },
    computed:{
      totalPrice:function () {
        let result = 0
        for (let i = 0;i < this.books.length;i ++){
          result += this.books[i].price
        }
        return result
      }
    }
  })
</script>
</body>
</html>

执行结果：
计算属性复杂操作
利用计算属性我们可以对数据进行一些复杂的计算或组合后再显示到页面中

三、计算属性的setter和getter

每个计算属性都包含有一个setter和一个getter，一般情况下我们只使用它的getter方法，而setter方法被省略，在某些需要setter的情况下我们也可以提供一个setter方法
举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 计算属性 -->
  <h2>{{fullName1}}</h2>
  <h2>{{fullName2}}</h2>
  <h2>{{fullName3}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      firstName:"Lebron",
      lastName:"James"
    },
    computed:{
      // 1.计算属性完整形式
      fullName1:{
        set:function () {

        },
        get:function () {
          return this.firstName + ' ' + this.lastName
        }
      },
      // 2.一般没有set方法，set方法省略成只读属性，属性名后面直接跟get方法的function
      fullName2:function () {
        return this.firstName + ' ' + this.lastName
      },
      // 3.具体实现set方法
      fullName3:{
        set:function (newValue) {
          console.log('------',newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get:function () {
          return this.firstName + ' ' + this.lastName
        }
      }
    }
  })
</script>
</body>
</html>

执行结果：
setter和getter
计算属性的set方法在设置计算属性的值的时候才会调用，在开发过程中很少使用set方法，一般简写成例子中fullName2的形式；
在fullName3中实现了set方法，作用是当设置fullName3的值时，将传入的值打印出来，并用split（）按空格分割存入数组names中，并将names[0]和names[1]传给firstName和lastName
调用set方法
这里将fullName3的值设置为’kobe bryant’，调用了set方法改变了firstName和lastName的值，所以3个h2元素的值也动态改变

四、计算属性和methods的对比

methods和computed看起来都能实现相似的功能，但他们有个根本区别：计算属性会进行缓存，如果多次使用，计算属性只会调用一次，大大提升了效率
举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 调用方法 -->
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</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:"Lebron",
      lastName:"James"
    },
    computed:{
      fullName:function () {
        console.log('computed');
        return this.firstName + ' ' + this.lastName
      }
    },
    methods:{
      getFullName:function () {
        console.log('methods');
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>
</body>
</html>

执行结果：
计算属性和methods的对比
可以看到computed和methods都使用了4次但控制台显示computed只调用了一次，只有当我们改变了data中的值computed才会再次调用。
当要对数据进行多次for循环时，若使用methods则每调用一次就会执行一次for循环，而computed只用执行一次，大大提升了效率