vue3学习笔记
最新回答
锁骨草莓印
2026-05-04 03:03:39
Vue3学习笔记总结：
响应式API：
- ref与shallowRef、triggerRef：
- ref用于解包响应式数据。
- shallowRef保留原始数组，不响应push等数组操作。
- triggerRef用于手动触发更新，并使数组响应push等操作。
- customRef允许自定义响应式行为，如节流。
- ref与shallowRef、triggerRef：
Vue3工具函数：
- isRef：检查是否为响应式引用。
- unref：获取响应式引用的值。
- toRef和toRefs：创建响应式引用，保持与原始对象的链接。
- readonly：创建只读对象。
- isProxy和isReadonly：检查对象是否为Proxy或只读对象。
- toRaw：获取对象的原始值。
计算属性与侦听器：
- computed：用于计算并返回值，具有缓存功能，不可直接修改。
- watch：侦听数据变化，可配置immediate、deep和flush选项。
- watchEffect：副作用侦听器，初始化时执行回调，监听响应式数据变化。
生命周期函数：
- setup：组件的入口函数，用于初始化状态、方法等。
- onBeforeMount、onMounted：在组件挂载前后执行。
- onBeforeUpdate等：在组件更新前后执行。
组件间传参：
- 使用import导入和props传递数据。
- 子组件通过emit触发事件，向父组件传递信息。
Vmodel：
- 支持在父组件中多处使用，实现双向数据绑定。
插槽与暴露：
- 使用插槽实现组件内容的分发。
- defineExpose暴露组件内部数据。
- attrs获取父组件传递的属性。
动态、异步与全局组件：
- 动态注册组件。
- 异步加载组件。
- 全局注册组件。
- 使用provider/inject实现父子组件传参。
- 使用mitt实现组件间通信。
Hooks：
- 封装函数，提高setup逻辑清晰度。
自定义指令：
- 创建和使用自定义指令，实现特定DOM操作。
动画与过渡：
- Transition组件结合animate使用，支持过渡动画。
- 支持路由切换动画。
keepalive：
- 缓存组件，支持组件的激活/失活状态。
Teleport：
- 将DOM移动到指定位置，实现跨组件的DOM操作。
热门标签
