Vue3+.net6.0 四 计算属性 computed

跟Vue2一样，我们在工作中使用data中的属性时，很多时候不是直接拿来用，而是要经过一些计算，判断，筛选的过程。

比如一个数组，我们可能在使用前要判断 有没有元素，是否包含某个元素，然后根据不同的情况有不同的展示方式，这些如果都写在html部分，会非常不好阅读，如果多个地方要做类似的判断，则会大大增加代码量和维护难度。

因此，我们可以使用计算属性。

写法和用法跟methods一样。

        computed:{
            checkList(){
                return this.persons.length>0;
            }
        }

 <p v-if="checkList">有数据！</p>

当persons属性发生改变后，会监测到checkList计算属性依赖persons，因此会同步更新。

 

跟vue2一样，我们使用methods，在里面定义一个方法，也可以实现相同的功能。

这里再强调一下computed和methods的异同：当多次请求时，如果computed依赖的属性值没有变化，那么不需要重新计算，而是读取缓存，性能更高，而methods总是会在重新渲染时再次执行。

在我们使用计算属性时，通常强调只做计算，而不做异步或者更改dom。我们只应当通过计算属性的声明去根据其他属性的值来得出一个新的值，也就是单纯的计算和返回。

题外话，在实际操作中，很多计算属性的功能都被方法包含了......