1、Setup 函数

1.setup 是vue3中的一个配置项
2、setup是所有组件所需要的数据和方法都需要配置到setup中的
3、setup两种返回值：
若返回一个对象 若返回一个渲染函数
mian.js文件

注意：尽量不与Vue2混用 setup中无法访问vue2中的配置
不能是async函数，因为返回值不再是return，而是promise，模板看不到return对象中的属性 被 promise包裹的对象

//引入的不再是vue构造函数，引入的是一个名为createAPP的工厂函数import { createApp } from 'vue'
import App from './App.vue'//创建应用实例对象--app(类似之前Vue2中的vm,但是app比vm更轻)
const app = createApp(App)
//挂载
app.mount('#app')/*const vm = new Vue({render:h=>h(App)
})
vm.$mount('#app')*/

App.vue文件

2.ref函数

作用：定义一个响应式的数据
语法 const xxx=ref(‘实例化的值’)
创建一个包含响应式的引用对象
JS中操作数据： xxx.value
模板中读取数据：不需要.value 直接 {{xxx}}

接收的数据类型：基本数据类型 对象类型

RefImpl 把一个数据变成响应式 用ref 引用对象

/响应式数据 数据变化时怎么响应到页面
import { ref } from "vue";
export default {name: "App",setup() {//数据let name = ref("陈奇真");let age = ref(18);//方法function changeInfo() {name.value = "郭雅琦";age.value = 19;}//返回一个对象 常用return {name,age,changeInfo,};

在模板template中不需要加name.value age.value 模板会自动识别
但是是setup中对配置的属性设置数据值时需要加name.value age.value

姓名：{{ name }}
年龄：{{ age }}

以上这些属性属于引用对象 ref对象
但是当层级越多，即可不用 .value 直接把对象值转化为Proxy ES6中的语法

基本类型用ref

3.reactive函数

定义一个对象类型的响应式数据
const 代理对象= reactive(源对象)
返回一个代理对象（Proxy的实例对象，简称proxy对象）
reactive的响应是深层次的，内部是基于ES6的Proxy实现的