Vue3之计算属性

Vue3的计算属性为了解决依赖响应式状态的复杂逻辑

基本用法

js 复制代码
<script setup> import { reactive, computed } from 'vue' 

const author = reactive({ 
    name: 'John Doe', 
    books: [ 
        'Vue 2 - Advanced Guide', 
        'Vue 3 - Basic Guide', 
        'Vue 4 - The Mystery' 
    ] 
}) 

// 一个计算属性 ref 
const publishedBooksMessage = computed(() => {
    return author.books.length > 0 ? 'Yes' : 'No' 
}) 
    
</script> 

<template> 
    <p>Has published books:</p> <span>{{ publishedBooksMessage }}</span>     
</template>

这里定义了一个计算属性 publishedBooksMessagecomputed() 方法期望接收一个 getter 函数,返回值为一个计算属性 ref 。和其他一般的 ref 类似,你可以通过 publishedBooksMessage.value 访问计算结果。计算属性 ref 也会在模板中自动解包,因此在模板表达式中引用时无需添加 .value

Vue 的计算属性会自动追踪响应式依赖。它会检测到 publishedBooksMessage 依赖于 author.books,所以当 author.books 改变时,任何依赖于 publishedBooksMessage 的绑定都会同时更新。

不同写法

要绑定一个动态类

写法一

js 复制代码
const isActive = ref(true) 
const error = ref(null) 
const classObject = computed(() => ({ 
    active: isActive.value && !error.value, 
    'text-danger': error.value && error.value.type === 'fatal' 
}))

<div :class="classObject"></div>

写法二

js 复制代码
const isActive = ref(true) 
const error = ref(null) 
const classObject = computed(() => { 
    return {
        active: isActive.value && !error.value, 
        'text-danger': error.value && error.value.type === 'fatal' 
    }
})

<div :class="classObject"></div>

两种计算属性写法

写法一 用了对象字面量的简写形式 (省略了return和大括号),直接返回一个对象。这是 ES6 的箭头函数语法:当函数体只有一句返回语句且为对象时,可以省略return和外层大括号,用小括号包裹对象。

写法二 用了完整的函数体语法 ,显式写出return语句。这种写法更适合函数体可能扩展的场景(比如未来需要添加更多逻辑,如条件判断、变量计算等)

相关推荐
90后的晨仔2 分钟前
Vue 插槽(Slots)全面解析与实战指南
前端·vue.js
golang学习记7 分钟前
从0死磕全栈之Next.js API 路由实战:不用后端,前端也能写接口!
前端
Nathan2024061610 分钟前
Kotlin-Sealed与Open的使用
android·前端·面试
MQliferecord12 分钟前
前端性能优化实践经验总结
前端
RoyLin16 分钟前
SurrealDB - 统一数据基础设施
前端·后端·typescript
longlongago~~17 分钟前
富文本编辑器Tinymce的使用、行内富文本编辑器工具栏自定义class、katex渲染数学公式
前端·javascript·vue.js
2501_9159214320 分钟前
前端用什么开发工具?常用前端开发工具推荐与不同阶段的选择指南
android·前端·ios·小程序·uni-app·iphone·webview
aixfe23 分钟前
BiomeJS 2.0 忽略目录配置方法
前端
Mintopia26 分钟前
Cesium-kit 又发新玩意儿了:CameraControl 相机控制组件全解析
前端·three.js·cesium
ssshooter26 分钟前
shader更换后,数据需要重新加载吗?
前端