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 = 18000let add = '太上老君是公认的道教始祖，即道教中具有开天创世与救赎教化的太上道祖。'function showAdd() {alert(add)}function changeName() {name = name == "太白金星" ? '太上老君' : '太白金星' //这样修改不会渲染到页面console.log(name) //name确实改了，但不是响应式的}function changeAge() {age += 1console.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>