一、setup文件的认识
特点1：script 中间的内容就是一个对象
特点2：script 在第一层 定义的方法 或者 变量 => 就是这个对象 属性 => 顶层的绑定回被暴露给模板（模板可以直接使用这个变量）
特点3：setup 默认执行生命周期beforeCreate created 注意：这个对象 => 就是当前这个组件实例二、什么是响应式api
处理 数据 => 我们把页面写的数据，需要动态改变的数据 => 叫做响 响应式数据 => 数据改变视图中使用了这个数据，这个数据回对应的 响应式数据底层实现 => vue3 => Proxy
可以把数据变成响应式api 的方法叫做响应式 api三、在vue3 中有哪些常用的响应式API？
响应式核心：
1、ref()
作用：将一个基本数据类型的数据变为响应式
语法：let 变量=ref(处理的数据)
<template>
<div>
<h2>响应式api</h2>
<h2>{{age}}</h2>
<button @click="addAge">change</button>
</div>
</template>
<script setup>
import {ref} from 'vue';
// ref 处理的数据
// 1 基本数据类型 => 通过vue2 响应式原理来实现Object.defineProperty()
// 2 处理的复杂的数据类型 => reactive()这个响应式api
let age=ref(29); // 通过ref 处理的数据 => 变成响应式
let data=ref({ages:50});
console.log(data,"data")
const addAge=()=>{
age.value+=1;
console.log(age);
}
</script>
<style>
</style>
2、reactive()
作用：将复杂的数据类型变成响应式数据 语法：let data=reactive({处理的数据}) 特点：1. 就是proxy代理可以将对象中第一层的属性变成响应式，不用递归，提供性能优化。2. 就是 proxy 代理的数据时对象，这个对象中有深层次，它会实现懒代理（就是用户只有在使用了这个数据，才会将这个数据变为响应式数据）<template>
<div>
<h2>响应式api</h2>
<h2>{{objP.name}}的年龄{{objP.age}}</h2>
<button @click="changeName">changeName</button>
<button @click="changeLike">changeLike</button>
</div>
</template>
<script setup>
import {reactive} from 'vue';
// 作用将复杂的数据类型变成响应式数据
let objP=reactive({
name:"小明",
age:8,
like:{eat:'
标签：name,reactive,ref,age,响应,api,Vue3,数据
From： https://www.cnblogs.com/chccee/p/17032036.html