Vue3【六】setup的使用和setup的返回值

Vue3【六】setup的使用和setup的返回值

setup函数的使用，和vue2的选项式不同 vue3的组合式使用的是setup函数
通过返回值将数据和方法传到页面
返回值也可以是一个箭头函数
setup先于 data和method执行所有无法读取到this和data，method的内容，反之可以

案例截图

目录结构

所有

Person.vue

<template>
    <div class="person">
        <h1>我是Person组件</h1>
        <h2>姓名:{{ name }}</h2>
        <h2>年龄:{{ age }} </h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showAdd">查看信息</button>
    </div>
</template>

<script lang="ts">
import { createLogger } from 'vite';

export default {
    name: 'Person', //组件名字

    setup() {
        // console.log(this) // setup函数中的this是undefined
        // 数据 原来vue2写在data中，此时的数据不是响应式的，改变不会被渲染到模板
        let name = "太上老君"
        let age = 18000
        let add = '太上老君是公认的道教始祖，即道教中具有开天创世与救赎教化的太上道祖。'
        function showAdd() {
            alert(add)
        }
        function changeName() {
            name = name == "太白金星" ? '太上老君' : '太白金星' //这样修改不会渲染到页面
            console.log(name) //name确实改了，但不是响应式的
        }
        function changeAge() {
            age += 1
            console.log(age)
        }
        // 将数据方法交出去。模板中才可以使用
        return {name, age, add,showAdd,changeName,changeAge}

        // setup的返回值也可以是一个渲染函数
        // return ()=>'箭头函数返回值'
    }

}

</script>

<style>
.person {
    background-color: #ff9e4f;
    box-shadow: 0 0 10px;
    border-radius: 30px;
    padding: 30px;
}

button {
    margin: 0 10px;
    padding: 0 5px;
    box-shadow: 0 0 5px;
    ;
}
</style>