2.9
创建Vue 可以用Vue的脚手架也可以用vite，目前有两种方式。
Vue2是选项Api 每个功能都要写在一起，通过data.methods，watch等配置项阻止代码逻辑，选项api
Vue3 是 Composition API（组合式） 组合式是写在一起，最后将它抽离出来
Composition组合式APi
setUP
setUP 函数是组合式api的入口函数，是vue3特有的选项
在beforeCreate之前执行
函数中this不是组件实例，是undefined
数据或者函数在模板中使用，需要在setUp返回。
在页面中，setup没有this，而beforeCreate有this。vue2的周期函数同样可以在vue3中去使用的。
创建响应式对象
reactive 瑞阿克缇吴 导入它，然后创建的对象就是响应式的，最后return 返回你创建的数据。
方法函数，必须返回才能用。
reactive 通常定义复杂类型的响应式数据。
新语法，去记语法多敲敲就记住了。
ref =js 和模板中的操作。
什么时候用ref合reactive函数呢？
Ref
用来定义响应式数据，不限类型，如果确定数据时对象并且字段名称也确定，用reactive ，其他的都用ref
确定对象和字段用reactive，其他的都用ref
意思不变，作用不变， vue3只是换了一种写法。
componets 计算属性
计算属性 setup 简写方便写法 所有都是按需导入
<template>
<div>
{{ arr }}
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const arr = ref([1, 2, 3, 4, 5, 6, , 8, 6, 6, , 5, 9])
// 计算属性
const newArr = computed(() => {
return arr.value.filter(item => {
return item <= 5
})
})
// 改变数据
setTimeout(() => {
// arr.value.push('新', '的', '数', '据')
arr.value = newArr.value
arr.value.push('数据已改变')
// console.log(newArr.value);
}, 1000)
</script>
监听，监听多个数据
监听指定的数据对象
Vue3中的生命周期函数
可以多次声明，区别就是这张表。按这个表叙述，按自己的话整理出来说。
选项api变成组合式Api com那个，去掉了beforeC
reate，按需引入，体积小。 怎么学Vue3？ 记语法，多敲。
父获取子组件的数据 及 调用子组件的方法
组件通信
通过父组件ref获取子组件数据和方法/ 父传子数据
子传父
组件通信全图
单个和多个可以不写这个
