vue的计算属性

最新推荐文章于 2025-02-25 14:38:19 发布

PCthedream

最新推荐文章于 2025-02-25 14:38:19 发布

阅读量520

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/PCthedream/article/details/127290460

版权

本文详细介绍了Vue框架中的计算属性，包括计算属性的概念、使用场景、配置项的get和set方法，以及其缓存机制。计算属性在依赖数据变化时自动更新，并通过Object.defineProperty实现响应式。示例代码展示了计算属性的完整写法和简写形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是计算属性

写在computed对象中的属性，本质上是一个方法，不过使用时依旧当属性来使用

2.什么时候使用计算属性

一个变量的值, 需要用另外变量计算而得来

语法：

computed: {
    "计算属性名" () {
        return "值"
    }
}

例子：

<script type="text/javascript">

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '熊',
            lastName: '大'
        },
        computed:{
            fullName:{
               get(){
                   return this.firstName +'-'+  this.lastName
               },
               set(value){
               }
            }
        }
    })
</script>

3、计算属性的配置项

get()：必须要写，该函数不接受参数
get()什么时候被调用?：当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用，getter函数有一个返回值，该返回值就是计算属性的值
set()：可选项，接受一个可选参数（计算属性被修改之后的值）
set()什么时候被调用?：当计算属性被修改时被调用
get()和 set()中出现的this执向vm

4、计算属性的缓存

计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果

<template>
  <div>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
    <p>{{ getMessage() }}</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg: "Hello, Vue"
    }
  },
  // 计算属性优势:
  // 带缓存
  // 计算属性对应函数执行后, 会把return值缓存起来
  // 依赖项不变, 多次调用都是从缓存取值
  // 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值
  computed: {
    reverseMessage(){
      console.log("计算属性执行了");
      return this.msg.split("").reverse().join("")
    }
  },
  methods: {
    getMessage(){
      console.log("函数执行了");
      return this.msg.split("").reverse().join("")
    }
  }
}
</script>

<style>

</style>

5、计算属性整个过程

当第一次调用get()之后，Vue实例身上会出现一个与计算属性同名的属性（我称为计算属性的缓存属性），该属性的值就是调用get()返回的值
当再次调用getter之后，Vue把getter返回的值赋值给这个缓存属性
缓存属性：因此当不是初次访问计算属性时且计算属性所依赖的数据没有发生变化时,Vue实际上用的是这个属性，而不是再次执行get()

原理：底层借助了Object.defineProperty方法提供的getter和setter

计算属性完整写法：

完整语法:
    computed: {
       // "计算属性名" (){},
        "计算属性名": {
            set(值){

            },
            get(){
                return 值
            }
        }
    }

计算属性简写：

当计算属性只需要get时才可以简写

<script type="text/javascript">

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '熊',
            lastName: '大'
        },
        computed:{
             //这个函数就是getter
             fullName:function(){
                    return this.firstName +'-'+  this.lastName
             }
        }
    })
</script>