comupted的使用

• 1.计算属性作用 ： 解决渲染数据的代码冗余问题

  • 某些数据在渲染的时候，可能要经过一些复杂逻辑的计算处理

• 2.计算属性的语法：在vue实例的computed对象中声明一个函数

  • 这个函数名就是计算属性的属性名
  • 在这个函数中 return 返回值（是计算属性的属性值）

• 3.注意点

  • 这个函数一定要写在vue实例的computed对象中
  • 这个函数一定要有返回值，否则计算属性无法渲染

• 4.计算属性缓存机制 a. 当第一次使用计算属性的时候, vue会调用一次函数。然后把函数名和返回值平铺到vue实例中。 b. 之后使用计算属性, vue不会调用这个函数，而是从缓存中直接读取。 c. 只有当计算属性内部的数据发生变化的时候，才会重新执行一次这个函数，然后又放入缓存

          -   ：计算属性主要是用于解决什么问题的？
  复制代码
  

  • 解决data中数据渲染冗余问题

-：计算属性好处

-   缓存功能

    -   当计算属性依赖值不变，直接从缓存读取
    -   当计算属性依赖值发生变化，vue会重新执行一次函数，并且将返回值放入缓存中

                /*计算属性两种写法 
                (1)fullName(){}  : 默认就是get函数, 无法添加set函数
                (2)fullName:{ get(){},set(val){} }   : 如果想要添加set函数，计算属性就需要写成对象格式
                */
                fullName:{
                    //获取计算属性
                    get(){
                        return `${this.firstName}${this.lastName}`
                    },
                    //设置计算属性
                    set(val){
                        console.log(val)//设置的值
                        this.firstName = val[0] || ''
                        this.lastName = val.substr(1,val.length-1)  
                    }
                }
            }