Vue中计算属性computed—(详解计算属性vs方法Methods，包括案例+代码)

原创已于 2024-10-15 22:53:30 修改 · 1.3k 阅读

22 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2024-10-15 22:48:16 首次发布

文章目录

计算属性computed

计算属性computed

3.1 概述

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

语法：

声明在 computed 配置项中，一个计算属性对应一个函数
使用起来和普通属性一样使用 {{ 计算属性名}}

注意事项：

computed配置项和data配置项是同级的
computed中的计算属性虽然是函数的写法，但他依然是个属性
computed中的计算属性不能和data中的属性同名
使用computed中的计算属性和使用data中的属性是一样的用法
computed中计算属性内部的this依然指向的是Vue实例

<script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
      },
       //computed和data同级
      computed: {
        totalCount () {}
      }
  </script>

3.2 使用

<style>
    table {
        border: 1px solid #000;
        text-align: center;
        width: 240px;
    }
    th,td {
        border: 1px solid #000;
    }
</style>
<body>
    <div id="app">
        <table>
            <tr>
                <th>名字</th>
                <th>数量</th>
            </tr>
            <tr v-for="(item, index) in list" :key="item.id">
                <td>{{ item.name }}</td>
                <td>{{ item.num }}个</td>
            </tr>
        </table>

        <!-- 目标：统计求和，求得礼物总数 -->
        <p>礼物总数：{{ totalCount }} 个</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            // 现有的数据
            list: [{
                id: 1,
                name: '篮球',
                num: 1
            }, {
                id: 2,
                name: '玩具',
                num: 2
            }, {
                id: 3,
                name: '铅笔',
                num: 5
            }, ]
        },
        computed: {
            totalCount() {
               //基于现有的数据，编写求值逻辑
              //计算属性函数内部，可以直接通过 this 访问到 app 实例
              //console.log(this.list)

           //需求:对this.list数组里面的num进行求和→reduce
           let total = this.list
                        .reduce((sum, item)=>sum+item.num,0)
                return total
            }
        }
    })
</script>

3.3 计算属性vs方法Methods

computed计算属性

作用：封装了一段对于数据的处理，求得一个结果
语法：
1. 写在computed配置项中
2. 作为属性，直接使用
  - js中使用计算属性： this.计算属性
  - 模板中使用计算属性：{{计算属性}}

methods计算属性

作用：给Vue实例提供一个方法，调用以处理业务逻辑。
语法：
1. 写在methods配置项中
2. 作为方法调用
  - js中调用：this.方法名()
  - 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

计算属性的优势:

缓存特性（提升性能）

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

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

<style>
    table {
        border: 1px solid #000;
        text-align: center;
        width: 300px;
    }
    th, td {
        border: 1px solid #000;
    }
    h3 {
        position: relative;
    }
</style>
<body>
    <div id="app">
        <h3>666666<span>{{ totalCountFn() }}</span></h3>
        <h3>666666<span>{{ totalCountFn() }}</span></h3>
        <h3>666666<span>{{ totalCountFn() }}</span></h3>
        <h3>666666<span>{{ totalCountFn() }}</span></h3>
        <table>
            <tr>
                <th>名字</th>
                <th>数量</th>
            </tr>
            <tr v-for="(item, index) in list" 
                :key="item.id">
                <td>{{ item.name }}</td>
                <td>{{ item.num }}个</td>
            </tr>
        </table>
        <p>礼物总数：{{ totalCountFn() }} 个</p>
        <p>礼物总数：{{ totalCount}} 个</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            // 现有的数据
            list: [
              { id: 1, name: '篮球', num: 3 }, 
              { id: 2,name: '足球', num: 2 }, 
              { id: 3, name: 'Java编程', num: 5 },
                 ]
        },
        methods: {
            totalCountFn() {
                console.log('methods方法执行了')//执行五次
                let total = this.list
                .reduce((sum, item) => sum + item.num, 0)
                return total
            }
        },
        computed: {
            // 计算属性：有缓存的，一旦计算出来结果，就会立刻缓存
            // 下一次读取 → 直接读缓存就行 → 性能特别高
            totalCount() {
                console.log('totalCount计算属性执行了')//执行1次
                let total = this.list
                .reduce((sum, item) => sum + item.num, 0)
                return total
            }
        }
    })
</script>

3.4 计算属性的完整写法

计算属性默认的简写，只能读取访问，不能 “修改”
如果要 “修改” → 需要写计算属性的完整写法

<style>
   input {
           width: 30px;
        }
</style>
<body>
    <div id="app">
        姓：<input type="text" v-model="firstName"> + 名：
        <input type="text" v-model="lastName"> =
        <span>{{fullName}}</span>

        <button @click="changeName()">改名卡</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: '李',
                lastName: '白',
            },
            methods: {
                changeName() {
                    this.fullName = '你好'
                }
            },
            computed: {
                // 简写 → 获取，没有配置设置的逻辑
                // fullName () {
                //   return this.firstName + this.lastName
                // }

                // 完整写法 → get()获取 + set()设置
                fullName: {
                  //(1)当fullName计算属性，被获取求值时，
                  //执行get（有缓存，优先读缓存）
                  //会将返回值作为，求值的结果
                    get() {
                      return this.firstName + this.lastName
                    },
                  //(2)当fullName计算属性，被修改赋值时，执行set
                  //修改的值，传递给set方法的形参
                    set(value) {
                       //当点击执行changeName()方法后，
                      //‘你好’会传给形参value
                        this.firstName = value.slice(0, 1)
                        this.lastName = value.slice(1)
                    }
                }
            }
        })
    </script>
</body>

标签

#vue.js #javascript #前端 #开发语言 #前端框架