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实现的