Vue3常用API之computed计算属性

最新推荐文章于 2025-03-09 20:45:20 发布

二七二十七

最新推荐文章于 2025-03-09 20:45:20 发布

阅读量415

点赞数

分类专栏： Vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/lhh_gxx/article/details/126322897

版权

Vue3 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Vue3中计算属性的使用方法，包括简写和完整写法，并通过实例展示了如何结合reactive响应式数据实现动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                        
                    
                    computed计算属性 
与vue2中的功能和配置都一致，写法不同<template>
    <div>{{person.name}}</div>
</template>
import {reactive, computed} from 'vue'
export default {
    name: 'App',
    setup () {
        const person = reactive({
            firstName: '张',
            lastName: '李'
        })
        // 计算属性-简写
        person.name = computed(() => {
            return person.firstName + lastName.firstName
        })
        // 计算属性-完整写法
        person.name = computed(() => {
            get () {
                return person.firstName + lastName.firstName
            },
         	set (value) {
                person.firstName = value.splice(0, 1)
                person.lastName = value.splice(1, 1)
            }
        })
        return {
            person
        }
    }
}
 

                