关于vue中计算属性computed的详细讲解

2024-04-02 19:04:59 314人浏览薄情痞子

摘要

目录1.定义2.用法3.computed的响应式依赖(缓存)4.应用场景附：计算属性的 getter 与 setter总结1.定义 computed是Vue的计算属性，是根据依赖关系

1.定义

computed是Vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新

2.用法

一般情况下，computed默认使用的是getter属性

3.computed的响应式依赖(缓存)

1. computed的每一个计算属性都会被缓存起来，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新。下面代码中，计算属性fullName，它依赖了firstName和lastName这两个属性，只要它们其中一个属性变化，fullName就会重新执行。

2.computed计算属性会被缓存，在下面代码中使用了两次fullName，但在控制台只输出了一次 “这是fullName”。

<template>
  <div>
    <div>
      姓：<input type="text" v-model="firstName" />
    </div>
    <div>
      名：<input type="text" v-model="lastName" />
    </div>
    <!-- 调用两次fullName -->
    <div>姓名：{{ fullName }}</div>
    <div>姓名：{{ fullName }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "张",
      lastName: "三",
    };
  },
  computed: {
    fullName() {
        console.log("这是fullName");
        return this.firstName + this.lastName;
    }
  }
};
</script>

4.应用场景

当一个数据受多个数据影响时，可以使用computed

1.本组件计算

2.计算props的值

3.计算vuex的state或者getters值的变化

附：计算属性的 getter 与 setter

默认情况下，计算属性函数是一个 getter 函数，如果计算属性只有 get 需求，则可以简写

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <!-- <input type="checkbox" v-model='isAll'> -->
            <input type="text" v-model='n'>
            +
            <input type="text" v-model='m'>
            =
            <input type="text" v-model='x'>
        </div>
        {{o}}
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                is: true,
                obj: {
                    // a: 1
                    a: 1
                },
                n: '',
                m: ''
            },
            computed: {
                //计算属性在这里写的属性不要在data重复写 跟data中的数据一样可以通过vm.获取或者修改
                isAll: {
                    get() {
                        //只要获取这个属性就会触发get这个函数
                        console.log(1);
                        return this.is
                    },
                    set(val) {
                        // val 设置的值
                        this.isAll = this.is
                    }
                },
                x: {
                    // 只要是依赖的值（必须有setter和getter响应的数据）发生改变了就会重新计算自己的值
                    get() {
                        return Number(this.n) + Number(this.m)
                    },
                    // set(){
                    //     Number(this.n) + Number(this.m)
                    // }

                },
                o: {
                    get() {
                        //如果没有在data的obj中初始化 就没有getter和setter响应 当改变this.obj.a的时候不会影响 数据o
                        return this.obj.a + 1
                    }
                },
                ss: {
                    get() { },
                    //计算属性必须要有get可以没有set
                    //v-model绑定的计算属性有get和set
                    //其他的一般只有get
                    set() { }
                },
                xx() {
                    //如果这个计算属性只有get可以写成一个函数的形式
                },
                bb() {
                    //第一次获取的时候依赖值没有发生改变但是也会默认执行一次
                    // 必须要有return  不支持异步
                    let a = 'kk';
                    setTimeout(() => {
                        a = this.aa + a
                    }, 1000)
                    console.log(a);
                    
                    return this.aa
                }
            }
        })
    </script>
</body>

</html>

参考：https://cn.vuejs.org/v2/guide/computed.html

Https://segmentfault.com/a/110000012948175