这个星期准备写一批关于vue3的总结，希望我能够把这个作为长久的习惯坚持下来，乘自己年轻，逃离舒适圈，往死离卷。累死自己卷死别人。
setup：组合式API
setup 会在每次组件实例构建之前被执行，在生命周期beforeCreate以及created周期被执行，script setup 会将setup中声明的变量、函数、import导入内容暴露给模板。
在setup中尽量不使用this，因为setup模板在props被解析后执行，date、methods等属性解析之前就以及执行了。
setup属性接收两个参数，props、context，props为父组件传过来的值是响应式引用，父组件发生改变props也相应的发生改变。但是对props进行解构赋值的会失去响应式，context中包含 emit(触发事件 等同于$emit)、expose、attrs、slots。
ref:响应式引用
为什么vue3中的响应式数据要包裹一层对象？
将值封装在一个对象中，看似没有必要，但为了保持 JavaScript 中不同数据类型的行为统一，这是必须的。
因为在js中类型分为两个大类，基本数据类型和引用数据类型，而vue3的数据响应式最重要的部分proxy用来监听数据的，但是proxy只能建通对象的变化不能监听基本数据类型的变化，所以在对基本数据类型的追踪是很有必要的。因此使用ref来对基本类型进行包裹。
这个响应式是该对象的所有层级都是响应式的，又由于解构赋值有可能赋值为基本类型所以在使用解构赋值时需要小心，会把解构出来的数据变为不是响应式的（需要再次验证）
let proxyDate = reactive({
countObj: {a: 1},
count: 1
})
let {countObj, count} = proxyDate
countObj.a = 2 // 响应式的
count = 1 // 不是响应式的 由于proxy只对对象生效
解构赋值不是vue自动去除响应式而是由于proxy的原因 只对引用类型有响应式。
计算属性（computed）
computed 接收一个类似getter的函数，输出一个computedRef对象，因此取值需要.value
计算属性的作用在于只用于计算，会跟踪getter函数中的响应式依赖，如果对computed返回值没有影响就不需要进行重新计算。不应该在计算属性中修改数据or异步请求
侦听器（watch）
watch 接收两个参数，第一个参数为响应式引用或者getter，第二个参数为回调函数，第三个为vue2 watch的一些配置 {immedate(立即执行)，deep(深层watch)}
watch对于ref的监听是浅层的，对于reactive的监听的深度监听默认deep为true
watchEffect 立即执行传进去的函数，同时追踪函数中的响应式数据，在响应式数据发生改变时重新运行该函数，感觉和computed比较类似。区别在于computed注重计算结果，watchEffect注重监听的过程
teleport 把包裹的组件移动到to目标标签下
<teleport to="body"> hello </teleport> // hello 无论在哪里执行都会在body的下面
模板ref
在vue2和vue3的暴露出一个对象，引用组件的ref可以调用组件的所有属性和方法，然而如果是script setup 中里面的属性和方法是私密的，必须要暴露出来才能在ref中看到。
组件模板
组件上使用class 会传到组件的根元素上（只有一个根元素的时候），多个的话需要使用attrs代表的是非props属性传值
绑定在属性上的函数会在每次组件更新时调用，所以不要在函数中修改数据或者触发异步请求
今天就到这里了，下次学习进步了、再来讲解。
