Vue computed计算属性

计算属性是Vue.js中一种非常有用的特性，它可以根据已有的数据计算出一个新的属性，并将其作为响应式数据供模板使用。

语法

 computed:{
                fullName:{     
                    get(){      
                        return this.firstName + this.lastName   
                    }
                    }

或者只有get()而没有set()时简写为：

 computed: {
    fullName() {
        return this.firstName + this.lastName 
    }
  }

 <div id="root">
       姓 <input v-model="firstName"><br>
       名 <input v-model="lastName"><br>

       全名：{{fullName}}
    </div>

    <script>
      const vm =  new Vue({
            el:'#root',
            data:{
                firstName:"张",
                lastName:"三"
            },
            computed:{
                fullName:{     
                    get(){        //当读取fullName时， get()被调用
                        return this.firstName + this.lastName   //this表示Vue实例
                    },

                    set(value){              //当fullName被修改时，set()被调用
                        const arr=value      
                        this.firstName=arr[0]  //将Vue的子传递给vue实例中的数据
                        this.lastName=arr[1]
                        
                    }
                }

            
            }
            
        })
    </script>

在上述例子中我们定义了一个fullName computed属性，此计算属性依赖了firstName和lastName两个数据属性，computed属性会监测这两个数据属性，在它们发生变化时自动重新计算该值。在模板中引用fullName属性就好像是一个普通的data属性一样： {{ fullName }}

以下是计算属性的主要作用：

1. 数据转换：计算属性可以对现有的数据进行转换和处理，生成新的数据。例如，你可以将原始的时间戳数据转换为可读的日期格式，或者计算两个数值属性的总和。这样可以使模板的代码更简洁、清晰，将复杂的计算逻辑移到计算属性中去处理。

2. 缓存计算结果：计算属性的计算结果会被缓存起来，只有当依赖的响应式数据发生变化时，才会重新计算。这意味着如果多个模板中都用到了同一个计算属性，只有在其依赖的数据发生变化时才会触发计算，提高了性能效率。

3. 依赖追踪：Vue.js能够自动追踪计算属性所依赖的数据，当依赖数据发生改变时，相关的计算属性会自动更新。这样，在模板中使用计算属性时，无需手动去更新计算属性，Vue.js会自动管理。

4. 可读性和维护性：通过将复杂或频繁使用的数据逻辑封装到计算属性中，可以使代码更易读、易维护。计算属性类似于模型中的属性或方法，提供了一个统一的接口来获取衍生属性，使得代码更具可读性和可维护性。

总结：计算属性在Vue.js中用于对现有数据进行转换和处理，并将计算结果作为响应式数据供模板使用。它具有缓存计算结果、依赖追踪和提升可读性和维护性的特点。