1、setup说明

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中。

特点

• setup函数返回的对象中的内容，可直接在模板中使用。

• setup中访问this是undefined。

• setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

2、setup返回值

1、setup返回一个函数，则可以自定义渲染内容

<template>
<div>

</div>

</template>


<script >
export default{
    name : "Person2",
    setup(){
        return () => "你好"
    }
}

</script>


<style scoped>


</style>

2、setup返回一个对象，则对象中的属性、方法在模板中可以直接使用

1、写法1

<template>
<div>
    <h2>{{ person.name }}</h2>
    <h2>{{ person.age }}</h2>
    <button @click="changeName">改变名称</button>
    <button @click="changeAge">年龄</button>
</div>


</template>


<script>
import {reactive} from 'vue'
export default{
    name : "Person3",
    setup(){
        let person =  reactive({
            name:"小白",
            age:19,
            tel:'1301111111',
        });

        const changeName = ()=>{
            person.name += "xiaobai"
        }

        const changeAge = ()=>{
            person.age += 1
        }

        return {person,changeName,changeAge}
    }
}

</script>


<style scoped>


</style>

2、写法2

<template>
<div>
    <h2>{{ person.name }}</h2>
    <h2>{{ person.age }}</h2>
    <button @click="changeName">改变姓名</button>
    <button @click="changeAge">改变年龄</button>
</div>


</template>


<script setup>
import {reactive} from 'vue'
    let person =  reactive({
            name:"小白",
            age:19,
            tel:'1301111111',
        });
    
    
    const changeName = ()=>{
        person.name += "xiaobai"
    }

    const changeAge = ()=>{
        person.age += 1
    }


</script>


<style scoped>


</style>