Vue计算属性-computed

_洋

已于 2022-07-15 18:03:36 修改

阅读量195

点赞数

分类专栏： vue2+vue3 文章标签： vue.js javascript 前端

于 2022-07-15 17:43:56 首次发布

本文链接：https://blog.csdn.net/mantou_riji/article/details/125808218

版权

vue2+vue3 专栏收录该内容

50 篇文章 7 订阅

订阅专栏

本文详细介绍了Vue.js中计算属性和方法的实现方式，以及它们的区别和应用场景。通过实例展示了如何使用插值语法、methods以及计算属性来动态显示姓名。计算属性在数据变化时会自动更新，并且具有缓存机制，提高了效率。文章还提到了计算属性的set方法，用于响应属性的修改，并探讨了其优点和简写形式。

摘要由CSDN通过智能技术生成

计算属性的引入

需求：实现如下样式：
在这里插入图片描述

插值语法实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>初始vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstname"><br/>
      名：<input type="text" v-model="lastname"><br/>
      姓名：<span>{{firstname}}-{{lastname}}</span>
    </div>
    <script>
      Vue.config.productionTip = false;
      new Vue({
          el:'#root',
          data: {
            firstname:'张',
            lastname:'三'
          }
      })
    </script>
  </body>
</html>

methods实现

插值语法中也可以调用函数，记得函数名后面要加括号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>初始vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstname"><br/>
      名：<input type="text" v-model="lastname"><br/>
      姓名：<span>{{fullName()}}</span>
    </div>
    <script>
      Vue.config.productionTip = false;
      new Vue({
          el:'#root',
          data: {
            firstname:'张',
            lastname:'三'
          },
          methods: {
            fullName(){
                return this.firstname+"-"+this.lastname
            }
          },
      })

    </script>
  </body>
</html>
</body>
</html>

这里通过调用方法fullName()来实现，问：为什么每次数据改变都会重新调用一次该函数，来重新显示名字呢？
原因：vue的特性，当html模板中有数据发生了变化，vue不确定调用的方法的返回结果是否发生了改变，所以只要数据变化，vue会将模板中的所有函数在执行一遍。

计算属性

在vue中会将data中的值看作属性
计算属性：将已有的属性（vue可以检测到的属性）进行加工计算生成一个全新的属性

计算属性需要存储在一个新的配置项中：

computed:{
}

computed中的计算属性也会存储在vm中，直接读取即可。
计算属性中属性的属性值一般是一个对象，且需要设置一个get方法，当有人读取该属性时会调用get方法。（不需要也不能手动调用get方法）
该get方法中的this，vue帮我们调整到指向vm，方便了我们的操作。
问题： get什么时候被调用？
（1）初次读取该属性的时候会调用get——初次调用之后会有缓存存储，之后再调用就无需在调用get直接在缓存中读取就可以。
（2）所依赖的数据发生变化的时候get重新调用——为了获取最新值，防止缓存的作用获取不到最新值
计算属性中的属性可以直接在html模板中直接访问（使用插值语法进行解析）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例</title>
</head>
<body><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>初始vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstname"><br/>
      名：<input type="text" v-model="lastname"><br/>
      姓名：<span>{{fullName}}</span>
    </div>
    <script>
      Vue.config.productionTip = false;
      new Vue({
          el:'#root',
        //   在vue中会将data中的值看作属性
          data: {
            firstname:'张',
            lastname:'三'
          },
        //   计算属性
        // 计算属性：将写完的属性进行加工计算生成一个全新的属性
          computed:{
            fullName:{
                // get作用：有人读取fullname时会调用get，且返回值作为fullname的值
                get(){
                    // 此处的this时vm
                    return this.firstname +"-"+this.lastname
                }
            }
          }
          
      })

    </script>
  </body>
</html>  
</body>
</html>

计算属性的属性的set方法（set方法不是必须的）
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例</title>
</head>
<body><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>初始vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstname"><br/>
      名：<input type="text" v-model="lastname"><br/>
      姓名：<span>{{fullName}}</span>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
          el:'#root',
        //   在vue中会将data中的值看作属性
          data: {
            firstname:'张',
            lastname:'三'
          },
        //   计算属性
        // 计算属性：将写完的属性进行加工计算生成一个全新的属性
          computed:{
            fullName:{
                // get作用：有人读取fullname时会调用get，且返回值作为fullname的值
                get(){
                    // 此处的this是vm
                    return this.firstname +"-"+this.lastname
                },
                // 当fullname被修改时调用
                set(value){
                    const arr = value.split("-")
                    this.firstname = arr[0]
                    this.lastname = arr[1]
                }
            }
          }
          
      })

    </script>
  </body>
</html>

    
</body>
</html>

效果：
未设置之前：
在这里插入图片描述
设置之后：

计算属性的优点

与methods实现相比，内部有缓存机制(复用），效率更高,调试方便。

计算属性的简写

当计算属性只需要读取而不需要修改的时候就可以采用简写格式。

computed:{
   fullName:function(){
      return this.firstname +"-"+this.lastname
   }
 }

function可以省略，再简写：

computed:{
   fullName(){
      return this.firstname +"-"+this.lastname
   }
 }

上述例子可以修改为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例</title>
</head>
<body><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>初始vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstname"><br/>
      名：<input type="text" v-model="lastname"><br/>
      姓名：<span>{{fullName}}</span>
    </div>
    <script>
      Vue.config.productionTip = false;
      const vm = new Vue({
          el:'#root',
          data: {
            firstname:'张',
            lastname:'三'
          },
          computed:{
            fullName(){
               return this.firstname +"-"+this.lastname
            }
          }
          
      })

    </script>
  </body>
</html>  
</body>
</html>