实习-Vue3文档学习笔记

 1、reactive绑定的引用型数据 不可以直接赋值 会丢失其原有的响应
        解决方法：ref({}) + ...解构

2、v-bind="$attrs" 透传属性 比如class这些

3、<template #header> 具名插槽  可能element-plus 的 el-dialog 中会使用
        #default 表示默认插槽
        <template #[dynamicSlotName]> 动态具名插槽

4、依赖注入 解决 prop 逐级透传的问题

        父 provide 子代 inject
        建议最好使用 Symbol 来作为注入名以避免潜在的冲突
        推荐在一个单独的文件中导出这些注入名 Symbol

5、组合式函数 复用代码 == 封装函数 需要export
        利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
        isRef unref

6、自定义指令 directive

7、插件+provide plugins
        插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码

8、transition 过渡动画效果
        transition-group

9、<KeepAlive> 是一个内置组件 组件之间转换时可能会用到
        它的功能是在多个组件间动态切换时缓存被移除的组件实例。
        保存被销毁的组件的状态，下次创建时直接用上次销毁的状态
        incldue + name

10、<Teleport to="body">
        传送dom到外层结构中

11、<suspense>用来在组件树中协调对异步依赖的处理

12、Vite 是一个轻量级的、速度极快的构建工具
        作者尤雨溪！！！

13、pinia 是进阶的vuex，目前官方推荐的状态管理库

        Pinia其目的是设计一个拥有组合式 API 的 Vue 状态管理库。

        storeToRefs 解构赋值

$patch 批量更新
mainStore.$patch({
count:
foo:
})

mainStore.$patch(state=>{
state.count++
})

14、Web 无障碍访问 (也称为 a11y) 是指创建可供任何人使用的网站的做法

15、router-link + router-view

beforeRouteUpdate 路由导航
params 参数 query ?后面的参数
alias 别名
props 路由传参
history: createWebHistory() 不同的历史纪录模式
router.beforeEach + next()
router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。

可用的配置 API
你可以为路由组件添加以下配置：
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

如果你正在使用组合 API 和 setup 函数来编写组件，你可以通过 onBeforeRouteUpdate 和 onBeforeRouteLeave 分别添加 update 和 leave 守卫

16、完整的导航解析流程:

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫(2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

17、父子传值

父传子
defineProps接受父组件传来的值
let props=defineProps({})

子传父
子组件：
let emitFn=defineEmits(['handler'])
const fn=()=>{
emitFn('handler')
}

父组件：
@handler="changeFn"
const changeFn=()=>{
}