11-计算属性-computed

1. 计算属性

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

语法:

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

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

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

    
    
    






    

        
礼物清单
        

            

                
名字
                
数量
            
            

                
{{ item.name }}
                
{{ item.num }}
            
        

        
        
礼物总数: {{ totalCount }}个

    


    

    

2. computed 计算属性 vs methods方法

computed计算属性:

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

语法: 

        1. 写在 computed 配置项中

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

缓存特性(提升性能):

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

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

methods方法:

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

语法:

        1. 写在 methods 配置项中

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

        

    
    
    






    

        
礼物清单{{ totalCount }}
        
礼物清单{{ totalCount }}
        
礼物清单{{ totalCount }}
        
礼物清单{{ totalCount }}
        

            

                
名字
                
数量
            
            

                
{{ item.name }}
                
{{ item.num }}
            
        

        
        
礼物总数: {{ totalCount }}个

    


    

    

3. 计算属性完整写法

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

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

// 简写
computed: {

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

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

    
    
    






    

        姓:+
        名:=
        {{ funllName }}



        改名卡