Vue计算属性详解

柳衣白卿

已于 2022-06-01 22:02:57 修改

阅读量3.2w

点赞数 44

分类专栏： Vue 文章标签： vue

于 2022-05-24 11:27:06 首次发布

本文链接：https://blog.csdn.net/qq_50864152/article/details/124942292

版权

Vue 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

本文详细介绍了Vue.js中的计算属性，包括它的定义、作用、与模板语法和方法的区别，以及何时使用。计算属性基于缓存，仅在依赖数据变化时重新计算，提供了一种更高效的方式来处理复杂的逻辑。通过示例展示了如何定义和使用计算属性，并提到了简写形式。计算属性的getter和setter分别在读取和修改时被调用，确保了数据的响应性。

摘要由CSDN通过智能技术生成

1、什么是计算属性

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

2、为什么要有计算属性

1. 为什么不是使用模板语法

虽然模板语法使用非常便利，但是它是被设计成用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

2. 为什么不是使用method对于复杂逻辑

无论计算属性还是methos，这两种实现方式的最终结果是完全相同的

因为计算属性是基于缓存实现的，只在计算属性所依赖的数据发生改变时它们才会重新求值，否则访问计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

3. 什么时候要用计算属性

对于任何复杂逻辑其计算结果需要被缓存的你都应当使用计算属性

4. 定义计算属性`fullName`

<script type="text/javascript">

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

5. 计算属性的配置项

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

计算属性整个过程

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

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

简写

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

<script type="text/javascript">

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

使用

{{计算属性}}

<div id="#root">
  <span>hello,{{fullName}}<span>
  <!--fullName是个计算属性-->    
<div>