关于前端:计算属性

计算属性

计算属性（computed）它能够依据其余响应式依赖项的变动自动更新。计算属性的次要作用是在须要对数据进行简单解决或计算时，提供一个更优雅、高效的解决方案。
视频链接

// false 未购买    true 已购买 
const buyStatus = ref(false)

const buyStatusText1 = computed(() => {return buyStatus.value === true ? '已购买' : '未购买'})

const buyStatusText2 = computed(function () {if (buyStatus.value === true) {return '已购买'}
    return '未购买'
})

computed 函数的参数是一个 == 带返回后果的办法 ==。
以上实例中别离在 computed 函数中应用 箭头函数 跟办法 作为参数，并进行简略的逻辑判断返回后果，当 响应式数据 buyStatus被批改时,buyStatusText1,buyStatusText2会自动更新。

计算属性的特点

响应式

计算属性会主动收集依赖项，并在依赖项发生变化时触发更新。这使得计算属性可能很好地与 Vue 的响应式系统集成。

简化模板中的简单逻辑

computed 计算属性能够帮忙咱们在解决一些简单的逻辑时，使代码更加简洁可读。

进步性能

应用办法来进行逻辑运算同样能够使模板放弃简洁，然而计算属性是基于它们的依赖项进行缓存的，只有在依赖项发生变化时，计算属性才会从新计算。
这使得计算属性在性能上比应用办法 更优越，因为办法在每次调用时都会从新执行计算。

留神点

1. 在 js 中应用须要加上.value

和 ref 一样，computed 创立的变量在 js 代码中应用须要加上.value，在模板中应用不必加，计算属性是只读的，不能去批改它。

2. 不要在计算属性中批改依赖项

计算属性是基于它们的依赖项进行缓存的，如果在计算属性中批改依赖项，可能会导致计算属性无奈正确缓存和更新。如果须要批改依赖项，应该应用办法或侦听器。

3. 不要在计算属性中执行异步操作

计算属性应该是同步的，如果在计算属性中执行异步操作，可能会导致计算属性无奈正确缓存和更新。如果须要执行异步操作，应该应用办法或侦听器。

可写计算属性

默认状况下计算属性都是 只读的，在某些非凡场景中可能才须要用到可写属性, 因为应用较少，有趣味的同学能够去官网理解。
vue3 官网 - 可写计算属性