1.响应式Ref和Reactive
ref在模板中的使用
ref结合ts
reactive结合interface
ref和reactive的区别
怎样选择？
可以原始类型使用ref object使用reactive
也可以都用ref，看自己习惯
2.计算属性computed
1.跟vue2的计算属性一样是为了让使模板更简洁易读
2.有缓存，避免不必要的重复计算，提升性能
3.computed也有自动解包，因此在模板中不用.value
computed(()=>{
return xxxx
})
使用
可以用泛型传入类型
3.监听器watch
监听ref
回调函数有两个值，第一个值是newValue,第二个值是oldValue
监听reactive的属性值
这里报错是因为不能监听响应式对象的属性值，要监听响应式对象才行，不是响应式对象中的一个属性值
但是可以用一个getter function包一下
也可以直接传响应式变量
- 对于
reactive对象，watch默认会进行深度监听（即使不写deep: true），嵌套属性变化也会触发。
监听数组
立即执行监听器
默认先执行一次
改变回调触发时机
默认是pre（之前），可以改成 post（之后
）
4.生命周期
| 生命周期钩子 | 触发时机境 | 典型用场景 |
|---|---|---|
onBeforeMount | 组件挂载到 DOM 前调用 | 初始化数据、设置事件监听（非 DOM 相关） |
onMounted | 组件挂载到 DOM 后调用 | 操作 DOM（如获取元素尺寸、初始化第三方库） |
onBeforeUpdate | 响应式数据更新，DOM 重新渲染前调用 | 获取更新前的 DOM 状态 |
onUpdated | 响应式数据更新，DOM 重新渲染后调用 | 处理更新后的 DOM（如滚动位置调整） |
onBeforeUnmount | 组件卸载前调用 | 清除定时器、事件监听、取消网络请求 |
onUnmounted | 组件卸载后调用 | 释放资源、清理副作用 |
onErrorCaptured | 子组件抛出错误时调用 | 捕获并处理子组件错误 |
onActivated | 缓存组件（<KeepAlive>）激活时调用 | 恢复组件状态、重新请求数据 |
onDeactivated | 缓存组件（<KeepAlive>）失活时调用 | 暂停定时器、保存组件状态 |
5. 模板中ref获取dom
- 必须在组件挂载后（如
onMounted钩子中）才能访问ref.value，否则为null（DOM 尚未渲染）。 - 模板中的
ref属性名需与脚本中声明的ref变量名一致（Vue 会自动关联）。
如果给子组件添加 ref，则获取到的是子组件的实例（可调用子组件的方法或访问其属性）。
异步更新：如果在修改数据后立即访问
ref 对应的 DOM，可能获取到旧状态，需用 nextTick 等待 DOM 更新：
6.setup
自动return 顶层组件的变量，这样就不用import
但是对于父子组件的props和emit要另外讨论：
props和emit
在vue3.3 编译器宏
在vue3.3中，是使用这样的语法defineProps和defineEmits
vue3.5 响应式props解构
7.依赖注入
避免重复父子组件传递，相当于祖先组件能直接传给后代
原始父子传属性的如图
依赖注入如图
provide() 接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。
就是一个key，一个值
使用的写法跟localStorage差不多
