devbox
代码架构师
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue中的计算属性和侦听器（监视器)

作者：代码架构师 | 2024-02-06 12:29:18

赞

踩

Vue中的计算属性和侦听器（监视器)

一、computed计算属性

1.概念

基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。

2.语法

  1. 声明在 computed 配置项中，一个计算属性对应一个函数

  2. 使用起来和普通属性一样使用 {{ 计算属性名}}

3.注意

  1. computed配置项和data配置项是同级的

  2. computed中的计算属性虽然是函数的写法，但他依然是个属性

  3. computed中的计算属性不能和data中的属性同名

  4. 使用computed中的计算属性和使用data中的属性是一样的用法

  5. computed中计算属性内部的this依然指向的是Vue实例

4.案例

比如我们可以使用计算属性实现下面这个业务场景

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     table {
  10.       border: 1px solid #000;
  11.       text-align: center;
  12.       width: 240px;
  13.     }
  14.     th,td {
  15.       border: 1px solid #000;
  16.     }
  17.     h3 {
  18.       position: relative;
  19.     }
  20.   </style>
  21. </head>
  22. <body>
  23.  
  24.   <div id="app">
  25.     <h3>小黑的礼物清单</h3>
  26.     <table>
  27.       <tr>
  28.         <th>名字</th>
  29.         <th>数量</th>
  30.       </tr>
  31.       <tr v-for="(item, index) in list" :key="item.id">
  32.         <td>{{ item.name }}</td>
  33.         <td>{{ item.num }}个</td>
  34.       </tr>
  35.     </table>
  36.  
  37.     <!-- 目标：统计求和，求得礼物总数 -->
  38.     <p>礼物总数：{{ totalCount }} 个</p>
  39.   </div>
  40.   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  41.   <script>
  42.     const app = new Vue({
  43.       el: '#app',
  44.       data: {
  45.         // 现有的数据
  46.         list: [
  47.           { id: 1, name: '篮球', num: 3 },
  48.           { id: 2, name: '玩具', num: 2 },
  49.           { id: 3, name: '铅笔', num: 5 },
  50.         ]
  51.       },
  52.       computed: {
  53.         totalCount () {
  54.           // 基于现有的数据，编写求值逻辑
  55.           // 计算属性函数内部，可以直接通过 this 访问到 app 实例
  56.           // console.log(this.list)
  57.  
  58.           // 需求：对 this.list 数组里面的 num 进行求和 → reduce
  59.           let total = this.list.reduce((sum, item) => sum + item.num, 0)
  60.           return total;
  61.         }
  62.       }
  63.     })
  64.   </script>
  65. </body>
  66. </html>

二、computed计算属性 VS methods方法

1.computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

  1. 写在computed配置项中

  2. 作为属性，直接使用

    • js中使用计算属性： this.计算属性

    • 模板中使用计算属性：{{计算属性}}

2.methods计算属性

作用：给Vue实例提供一个方法，调用以处理业务逻辑。

语法：

  1. 写在methods配置项中

  2. 作为方法调用

    • js中调用：this.方法名()

    • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

3.计算属性的优势

  1. 缓存特性（提升性能）

    计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

    依赖项变化了，会自动重新计算 → 并再次缓存

  2. methods没有缓存特性

  3. 通过代码比较

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8.   <style>
  9.     table {
  10.       border: 1px solid #000;
  11.       text-align: center;
  12.       width: 300px;
  13.     }
  14.     th,td {
  15.       border: 1px solid #000;
  16.     }
  17.     h3 {
  18.       position: relative;
  19.     }
  20.     span {
  21.       position: absolute;
  22.       left: 145px;
  23.       top: -4px;
  24.       width: 16px;
  25.       height: 16px;
  26.       color: white;
  27.       font-size: 12px;
  28.       text-align: center;
  29.       border-radius: 50%;
  30.       background-color: #e63f32;
  31.     }
  32.   </style>
  33. </head>
  34. <body>
  35.  
  36.   <div id="app">
  37.     <h3>小黑的礼物清单声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/62753
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。