vue-计算属性

​

1.什么是计算属性？

计算（computed）属性是Vue3中的一个响应式计算属性，它可以根据其他响应式数据的变化而自动更新其自身的值。计算属性可以接收一个计算函数，并在计算函数中使用其他响应式数据的值进行计算。当任何一个参与计算的响应式数据发生变化时，计算属性会自动重新计算其值，并触发相应的依赖更新。

2.怎么定义计算属性？

在computed函数中定义属性名和getter（必要）setter（非必要）方法

computed:{
            fullName:{
               get(){
                   return this.firstName +'-'+  this.lastName
               },
               set(value){
               }
            }
        }

当计算属性中的方法只有geter时可以简写为：

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

3.为什么要使用计算属性？

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于复杂逻辑，计算属性的性能会更高

4.计算属性（computed）和监听属性（watch）的区别

1.这两个属性都能在数据发生变化时进行相应
2.计算属性具有缓存机制，除非依赖的响应式属性变化才会重新计算，而监听属性没有缓存机制，每当监听的数据变化时，都会执行回调函数，对性能影响可能较大
3.监听范围不同：监听属性监听的是一个变量（或者是一个常量）的变化，这个变量可能是一个单一的变化也可能是一个数组。 计算属性可以监控很多个变量，但是这个变量一定是存在于vue实例中

总结

计算属性是Vue3中用于简化复杂逻辑的一种响应式属性，通过定义getter和可选的setter方法，计算属性可以根据其他响应式数据自动更新其值，具备缓存机制，从而提升性能和代码的可维护性。相比之下，监听属性虽然也能响应数据变化，但缺乏缓存机制，可能对性能产生影响，并且其监听范围较为单一。通过合理使用计算属性，我们可以保持模板简洁，同时有效管理复杂的业务逻辑。