vue中＜script setup＞中使用computed方法

在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>