Vue | 计算属性

1、什么是计算属性

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

2、为什么要有计算属性

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

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、计算属性的配置项

（1）get()：必写，不接受传参，返回值就是计算属性的值
（2）set()：可选项，接受一个可选参数（计算属性被修改之后的值）

6、计算属性整个过程

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

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

使用

List item

{{计算属性}}

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