vue2与vue3不同点：opitons api 与cmposition api
vue2:options api 采用的是命令式编程，而vue3组合式api采用的是函数式编程，两者存在很大的差异，vue3更灵活，难度也更大。
script 语法糖，vue3可以通过导入函数的方式来定义响应式数据
为了在声明 props 和 emits 选项时获得完整的类型推断支持，我们可以使用 defineProps 和 defineEmits API，它们将自动
地在 <script setup> 中可用：
使用 <script setup> 的组件是默认关闭的：
通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定；
通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的 property
当使用 <script setup> 的时候，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容)
1、reactive(只能定义复杂数据)主要用于本地数据，数据之间存在一定关系
//定义响应式数据
const fullname=reactive({
username:"111",
passwrod:"234"
})
这里 reactive 传入的数据必须是复杂数据
2、ref(即可以定义简单数据，又可以定义复杂数据)
单项数据流(规范)：子组件拿到数据后只能使用，不能修改，如果确实要修改，那么应该将事件传递出去，由父组件修改数据
read only 函数：readonly会返回原始对象的只读代理（也就是它依然是一个Proxy，这是一个proxy的set方法被劫持，并且不能对其进行修改；
在readonly的使用过程中，有如下规则：
readonly返回的对象都是不允许修改的；
但是经过readonly处理的原来的对象是允许被修改的；
✓ 比如 const info = readonly(obj)，info对象是不允许被修改的；
✓ 当obj被修改时，readonly返回的info对象也会被修改；
✓ 但是我们不能去修改readonly返回的对象info；
toRefs
如果我们使用ES6的解构语法，对reactive返回的对象进行解构获取值，那么之后无论是修改结构后的变量，还是修改reactive
返回的state对象，数据都不再是响应式的,toRefs的函数，可以将reactive返回的对象中的属性都转成ref；
如果我们只希望转换一个reactive对象中的属性为ref, 那么可以使用toRef的方法：
