Vue的计算属性

Posted 2023-05-05

参考技术A

有时候我们可能需要在 里添加一些需要计算再展示出来数据
例如：在页面中展示学生的成绩总分和平均分：

以上是通过在 里运算，得出总分和平均分
虽然也能解决问题，但是特别不清晰，特别是当运算比较复杂的时候
那怎么办呢？
了解一点的，应该会想到 methods ，
没错，确实 methods 也可以！但事实上， vue 给我们提供了一个更好的解决方案叫 计算属性
计算属性是 vue 实例中的一个配置选项： computed
通常里面都是一个个计算相关的函数，函数里头可以写大量的逻辑，最后返回计算出来的值
即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。

如上，
计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能 。而如果写在 methods 里，数据根本没有缓存的概念，所以每次都会重新计算。这也是为什么这里我们没用 methods 的原因
以上就是 Vue 的计算属性的基本用法!

vue计算属性详解

vue计算属性详解

什么是计算属性

计算属性，字如其名，首先它是属性，其次有计算的“功能”

说的官方一点：计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动变化，与之相关的DOM部分也会同步自动更新。

计算属性的使用

在computed配置项中添加我们的计算属性，在属性里面写我们的逻辑代码。

例子：我们使用input来加入数组元素，同时使用计算属性计算这个数组的和。

注意：计算属性其实是属性，在页面上使用只需要用属性值，不要带（），不然就变成方法了。

代码

<template>
  <div id="main">
    <div class="one">
      <el-input v-model="number" placeholder="输入数字"></el-input>
      <el-button type="primary" circle @click="add">+</el-button>
    </div>

    <p>这个数组是： list </p>
    <p>数组的和为 sum </p>
  </div>
</template>

<script>
export default 
  data() 
    return 
      list: [],
      number:0,
    ;
  ,
  methods:
    add()
      this.list.push(this.number)
    
  ,
  computed: 
    sum: function () 
      // `this` 指向 vm 实例
      var ans = 0;
      this.list.forEach((item, index) => 
        ans +=parseInt(item);
      );
      return ans
    ,
  ,
;
</script>

要知道的getter和setter

计算属性都包含有一个getter和一个setter，计算属性会默认使用 getter 函数,如果你要使用 setter 函数，那么你必须要手动写出 setter 函数

setter函数中，我们可以去对getter中使用到的数据进行操作，所谓因变量去影响自变量。

当我们要给这个属性进行赋值，vue会解析调用set方法，并且将值传入，这样newValue就能接收到

例子：通过控制台简单的赋值给该属性，页面就会发生改变

代码：

<template>
  <div id="main">
    <div class="one">
      <p> firstName </p>
      <p> lastName </p>
    </div>

    <p>拼接后为:  fullName </p>
  </div>
</template>

<script>
export default 
  data() 
    return 
      firstName: "张三",
      lastName: "李四",
    ;
  ,
  mounted() 
    window.vue = this;
  ,
  computed: 
    fullName: 
      // getter
      get: function () 
        return this.firstName + "喜欢" + this.lastName;
      ,
      // setter
      set: function (newValue) 
        var names = newValue.split(" ");
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      ,
    ,
  ,
;
</script>

计算属性的优点

了解了这么多，发现计算属性其中的计算都是可以通过方法来实现的，那么我们为什么还需要用到计算属性？

😉优点来了

计算属性是基于响应式依赖进行缓存的,只在相关响应式依赖发生改变（相关的属性变化）时它们才会重新求值。提升了性能

写在最后

欢迎大佬们阅读，如果有误，请评论指出，不胜感激。

💌 想做一个只记得快乐和知识点的人。希望你也是 💌

一个心怀浪漫宇宙，也珍惜人间日常的码农