11-计算属性-computed

一个微不足道的bug

已于 2023-08-13 23:26:59 修改

阅读量66

点赞数

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

于 2023-08-13 22:38:24 首次发布

本文链接：https://blog.csdn.net/m0_58250910/article/details/132265753

版权

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

82 篇文章 3 订阅

订阅专栏

1. 计算属性

概念: 基于现有的数据, 计算出来的新属性, 依赖的数据变化,自动重新计算

语法:

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

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

计算属性 -> 可以将一段求值的代码进行封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>


    <div id="app">
        <h3>礼物清单</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>

        <!-- 2. 目标: 统计求和,求数据的总数 -->
        <p>礼物总数: {{ totalCount }}个</p>

    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/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 },
                ]
            },
            //1. 声明计算属性
            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>


</body>

</html>

2. computed 计算属性 vs methods方法

computed计算属性:

作用: 封装了一段对于数据的处理,求得一个结果.

语法:

1. 写在 computed 配置项中

2. 作为属性, 直接使用 -> this.计算属性 {{ 计算属性 }}

缓存特性(提升性能):

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

依赖项变化了, 会自动重新计算 -> 并再次缓存

methods方法:

作用: 给实例提供一个方法,调用以处理业务逻辑

语法:

1. 写在 methods 配置项中

2. 作为方法,需要调用 -> this.方法名() {{ 方法名() }} @事件名="方法名"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>


    <div id="app">
        <h3>礼物清单<span>{{ totalCount }}</span></h3>
        <h3>礼物清单<span>{{ totalCount }}</span></h3>
        <h3>礼物清单<span>{{ totalCount }}</span></h3>
        <h3>礼物清单<span>{{ totalCount }}</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>礼物总数: {{ totalCount }}个</p>

    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/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 },
                ]
            },

            methods:{
                // 方法无缓存,调用几次就会执行几次
                // totalCount(){
                //     console.log("methods方法执行了")
                //     let total = this.list.reduce((sum,item) => sum + item.num, 0)
                //     return total
                // }
            },

            // 声明计算属性
            computed:{
                // 计算属性: 有缓存的,一旦计算出来结果, 就会立即缓存
                // 下一次读取结果 -> 直接读缓存就行
                totalCount(){
                    console.log("计算属性执行了")
                    let total = this.list.reduce((sum,item) => sum + item.num, 0)
                    return total
                }
            }
        })

    </script>


</body>

</html>

3. 计算属性完整写法

计算属性默认的简写,只能读取访问,不能"修改".

如果要"修改" -> 需要写计算属性的完整写法

// 简写
computed: {

    计算属性名 () {
       一段代码逻辑(计算逻辑)
       return 结果 
    }
}

// 完整写法
computed: {
    计算属性名 () {
       get() {
       一段代码逻辑(计算逻辑)
       return 结果 
        },
       set(修改的值) {
        一段代码逻辑(修改逻辑)
        }
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>


    <div id="app">
        姓:<input type="text" v-model="firstName">+
        名:<input type="text" v-model="lastName">=
        <span>{{ funllName }}</span><br><br>

        <button @click="changeName">改名卡</button>


    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({

            el: '#app',
            data: {
                firstName: '张',
                lastName: '三'
            },

            methods: {
                changeName() {
                    // 给funllName计算属性 赋值
                    this.funllName = "李四"
                }
            },

            // 声明计算属性
            computed: {
                // 简写 -> 获取, 没有配置设置的逻辑
                // funllName() {
                //     return this.firstName + this.lastName
                // }

                // 完整的写法 -> 获取 + 设置
                funllName: {
                    // 1. 当funllName计算属性, 被获取求值时,执行 get(有缓存,优先读缓存)
                    // 会将返回值作为, 求值的结果
                    get() {
                        return this.firstName + this.lastName
                    },
                    // 2.当 funllName计算属性,被修改赋值时,执行 set
                    // 修改的值,传递给set方法的形参
                    set(value) {
                        // console.log(value)
                        // 对字符串截取
                        // console.log(value.slice(0, 1)) // 第一个字
                        // console.log(value.slice(1)) // 第二个到结束

                        this.firstName = value.slice(0, 1)
                        this.lastName = value.slice(1)

                    }

                }
            }

        })

    </script>


</body>

</html>