Vue3的composition API—setup函数, ref函数，reactive函数

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文件

 <template><h1>个人信息</h1><h2>姓名：{{ name }}</h2><h2>姓名：{{ age }}</h2><h2>姓别：{{ sex }}</h2><button @click="sayhello">说话</button><br /><br /><button @click="sayWelcome">说话(vue2)</button>
</template><script>
// import { h } from "vue";
export default {name: "App",//此处不考虑响应式data() {return {sex: "男",};},methods: {sayWelcome() {alert("我叫${name},我${age}岁了，你好");},},setup() {//数据let name = "陈奇真";let age = 18;//方法function sayhello() {alert("我叫${name},我${age}岁了，你好");}//返回一个对象 常用return {name,age,sayhello,};//返回一个函数=>渲染函数// return()=>{h('h1','华农')}},
};
</script><style>
</style>

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

<h2>姓名：{{ name }}</h2>
<h2>年龄：{{ age }}</h2>

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

基本类型用ref

3.reactive函数

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