Vue.js 核心知识点总结

张开发
• 2026/4/18 7:15:47 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

Vue.js 核心知识点总结
1. 单向数据流One-Way Data Flow核心原则父组件通过 props 向子组件传递数据子组件不能直接修改 props。若子组件需要修改数据应通过$emit触发事件通知父组件进行修改。目的保证数据变化可追溯、可预测便于调试和维护。正确做法示例vue!-- 父组件 -- Child :countcount updatecount $event / !-- 子组件 -- button click$emit(update, count 1)1/button2. Provide / Inject跨层级传递数据适用场景深层嵌套组件如爷爷 → 父亲 → 孙子避免 props 逐层透传。特点祖先组件使用provide提供数据。后代组件使用inject获取数据。默认不具响应性但可传递ref或reactive对象实现响应式。示例javascript// 祖先组件 provide(theme, ref(dark)) // 后代组件 const theme inject(theme)3. KeepAlive 组件缓存作用缓存动态切换的组件实例避免状态丢失如表单输入、滚动位置。核心属性include/exclude按组件名控制缓存。max最大缓存实例数量。生命周期钩子缓存专用onActivated组件被激活进入视野时触发。onDeactivated组件被停用离开视野时触发。注意首次挂载时会同时触发onMounted和onActivated后续只触发onActivated。4. 普通插槽 vs 作用域插槽类型数据来源使用场景普通插槽父组件作用域父组件决定渲染内容与样式作用域插槽子组件向父组件传递数据子组件提供数据父组件决定如何渲染作用域插槽示例vue!-- 子组件 -- slot :itemitem / !-- 父组件 -- Child v-slot{ item } {{ item.name }} /Child5. 组件通信方式总结速查表方式适用层级是否响应式推荐场景props / emit父子是常规父子通信provide / inject跨多代需手动实现深层嵌套组件$refs / $parent父子否直接调用方法或属性event bus (mitt)任意否非父子、简单项目Vuex / Pinia全局是大型应用状态管理

更多文章