Vue计算属性详解

目录

​编辑

1、什么是计算属性

2、为什么要有计算属性 

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

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

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

4. 定义计算属性fullName 

 5. 计算属性的配置项

 

1、什么是计算属性

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

2、为什么要有计算属性 

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

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

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

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

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

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

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

4. 定义计算属性fullName 

<script>
   export default {
        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>
 
    export default {
        data: {
            firstName: '熊',
            lastName: '大'
        },
        computed:{
             //这个函数就是getter
             fullName:function(){
                    return this.firstName +'-'+  this.lastName
             }
        }
     }
   
</script>

使用：

• {{计算属性}}

<div>
  <span>hello,{{fullName}}<span>
  <!--fullName是个计算属性-->    
<div>