【vue3】vue3 setup如何使用computed？

小孟js

已于 2022-03-23 15:07:48 修改

阅读量1w

点赞数 2

分类专栏： vue3 文章标签： vue javascript 前端

于 2022-03-22 16:24:17 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39576711/article/details/123663460

版权

vue3 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了Vue3中`setup`选项的使用，包括在`setup`中如何使用`computed`来创建响应式变量。示例展示了如何通过getter函数创建不可变的响应式ref对象，以及如何通过具有get和set方法的对象创建可写的ref。同时，文章通过父子组件间的交互，演示了如何结合`props`和`computed`实现数据的响应式处理。

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

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。
他接受两个参数：

{Data} props
{SetupContext} context

在setup选项里使用computed需要手动引入computed方法，computed接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。或者，接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。下面来看示例。

父组件index.vue：

<script lang="ts">
import ComputedTest from './computedTest.vue'
export default {
    components:{ComputedTest},
    setup(){
        return {
            
        }
    },
}
</script>
<template>
    <div>
        <ComputedTest name="Jack"></ComputedTest>
    </div>
</template>

子组件computedTest.vue：

<script lang="ts">
import { ref,computed,toRefs } from 'vue'
interface Data {
    [key:string]:unknown
}
export default {
    props:{name:String},
    setup(props:Data){
    	//创建一个响应式变量
        const text = ref("world")
        //通过computed返回一个修改后的响应式变量，会根据text值的变化而变化
        //这里computed接受一个getter函数
        const computedText = computed(()=>"hello " + text.value)
		
		//这里computed接受一个具有 get 和 set 函数的对象，可以通过set修改原始值text
        const variable = computed({
            get:()=>text.value + "111",
            set:(val)=>text.value = val
        })
        //通过设置variable的值修改原始值text
        const changeText = ()=> variable.value = "china"
		
		//接受父组件的props变量，并用computed包装
        const { name } = toRefs(props)
        const anotherText = computed(()=>name.value+" "+variable.value + "=> 你好 世界")

        return {
            computedText,
            anotherText,
            changeText,
            variable
        }
    }
}
</script>
<template>
<div>
    <div>{{computedText}}</div>
    <!-- hello world -->
    <div>{{anotherText}}</div>
    <!-- Jack world111=> 你好 世界 -->
    <div>{{variable}}</div>
    <!-- world111 -->
    <button @click="changeText">修改</button>
</div>
</template>