Vue.js 计算属性

# 01、你想理解好计算属性，就得先整明白什么东西叫属性？
    💢对于Vue来说，他认为你data中配置项所有所写的东西就是`属性`,key是属性名，value是属性值

# 02、计算属性定义
    💢所谓的计算属性就是拿着你已经写完的属性，去加工、去计算，然后生成一个全新的属性，这就是·计算属性·

        💢例子：data配置项，有姓、有名，那你说，我是不是可以完全可以给他计算出来一个东西，叫 fullname   那么 firstName，lastName 我们称之为属性，而 fullname 我们就称之为计算出来的属性。简称 计算属性
        💢注意的事项：在vue当中呢，他是把属性和计算属性分开放，所以不能像12行那样直接写在data配置项当中，data里面放的是属性，如果你想弄那个计算属性，你得需要一个配置项，你直接写在data配置项里面，肯定是不可以的
             data: {
           firstName:'张'
           lastName:'三'
              🤪~~fullname：？？？~~
       },

# 03、计算属性的起步
    💢前情提要：它配置的方法和data类似，你也得写成一个对象的形式，因为你想啊，data里的属性是很多很多的，那我计算属性以后肯定也是很多的，所以得写一个对象。所以接下来的第一步：就给你计算属性起一个名字吧~ date中有姓，有名，那么这个计算属性就叫 fullname 吧
    💢注意事项：不可以像19行那样直接写成字符串，计算属性，计算属性，他有可能比较复杂，所以vue要求你，把整个计算的过程，配置成一个对象,对象里面要写一个get(){}
    computed:{
      🤪~~fullname：‘张-三’~~
      //这里的fullname也在vm的实例对象之上
      fullname:{
          //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
          get(){
              // 25:1 这里不能直接去写，因为他访问不到vue实例对象，vue已经把get函数里的this调成了vm实例对象，所以...
              🤪~~return firstName+'-'lastName~~
              return this.firstName+'-'+this.lastName
          }
      }
    }
    💢特性特点：get什么时候去调用，当有重复调用的时候，他有一个缓存机制，重复调用的会走缓存，他就不会找get函数要了
    //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
# 04、computed vs methods
    💢我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
    💢可以说使用 computed 性能会更好，有缓存机制,可以复用，效率更高，调试方便，可以通过调试工具实时观测的到
# 05、set
    💢computed 属性默认只有 get ，不过在需要时你也可以提供一个 set ：
    💢get是拿到数据，如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
    💢set什么时候调用? 当fullName被修改时。
# 06、总结
    💢在data配置项中，你写vm身上就有啥，methods也是一样,但是计算属性不一样，他在往vm身上放的时候,他会自动调用get，拿到get的返回值，然后放在vm身上，然后放的名字是 fullname
    💢get&set不能写成箭头函数
    💢凡是vue所管管理的函数都不要写成箭头函数  
    💢计算属性最终会出现在vm上，直接读取使用即可。
        错误写法：
            firstName()
        正确写法：
            firstName
# 07、计算属性的简写形式
    💢计算属性多数情况下只读取出来展示，所以不需要set， 注意一旦你确认了，你的数据只考虑读取，不考虑修改，才可以使用简写
    💢computed 属性默认就有 get，所以我们可以把他写成函数的形式
        //:function(){} 这个就充当get使用
                fullName:function(){
                    console.log('get被调用了')
                    return this.firstName + '-' + this.lastName
                }
    💢就上方的函数可以再进行升级进化一下
        //最终形式：
                fullName(){
                    console.log('get被调用了')
                    return this.firstName + '-' + this.lastName
                }
---
# 其他：
- firstName：姓氏
- lastName：名字
- fullname：全名
- computed：计算属性，计算，估算过得 || 本身就有计算的意思