计算属性
计算属性(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官网-可写计算属性