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=()=>{
}