- 博客(172)
- 收藏
- 关注
RSS订阅原创 vue3的getCurrentInstance
特性说明返回实例范围当前组件实例（非根组件）有效作用域仅限于setup()或生命周期钩子内部生产环境安全属性proxy（而非ctx父组件访问（直接父组件）根组件访问需通过递归向上查找。
2025-07-05 23:03:12
422
原创 bpmn.js-基础篇
如果你只是展示流程图→ 用BpmnViewer如果你需要编辑流程图→ 用社区和示例社区讨论：GitHub Issues 和 Discussions 是解决问题的好地方。你可以通过插件机制自定义或隐藏 Palette：1.通过additionalModules覆盖默认模块paletteProvider: ['value', null] // 禁用默认palette模块});2.使用自定义空模块覆盖// 自定义空palette模块modules: [}));
2025-07-04 22:31:46
750
1
原创 Vue.extend 和 Vue.component
Vue.extend是一个构造器方法，用于创建一个组件“子类”，它本身不会注册组件，只是定义组件的结构。是一个注册方法，用于将组件注册为全局组件，可以在任意其他组件中直接使用。功能Vue.extend类型构造组件的方法注册组件的方法是否注册组件❌ 否✅ 是返回值组件构造器undefined是否可复用✅ 可多次实例化✅ 可全局使用是否支持组件对象或构造器✅ 支持对象✅ 支持对象或构造器典型用途动态创建组件、手动实例化全局注册组件、简化模板使用如果你需要定义组件逻辑。
2025-06-25 23:34:30
228
原创 tsconfig.json常用配置
配置作用设置非相对路径模块的查找起点为当前目录常用于配合paths实现路径别名、简化 import 路径示例你可以创建自己的.d.ts文件，并通过"types"
2025-06-25 14:00:00
808
原创 在 Vue 3 的响应式系统中，Symbol、WeakMap 和 WeakSet 是构建其核心机制的关键工具
这就是典型的循环引用（circular reference）。无限递归栈溢出重复代理/处理对象内存泄漏数据结构用途是否参与响应式系统Symbol定义唯一键名、迭代标识、元编程✅WeakMap存储对象 → 依赖的映射关系✅WeakSet防止循环引用、临时标记对象✅Map数据结构是否解决循环引用是否防内存泄漏是否推荐用于响应式系统Map❌❌否WeakMap✅✅✅ 推荐Set❌❌否WeakSet✅✅✅ 推荐。
2025-06-24 23:11:05
637
原创 MVVM 和 MVC 的区别
维度MVCMVVM是否支持数据绑定否是（双向绑定）UI 更新方式手动更新自动更新开发复杂度较低略高但更灵活可测试性一般高适用平台Web、后端渲染单页应用、前端框架、桌面应用等因此，MVVM 更适用于现代前端开发，尤其在需要频繁更新 UI 的场景下表现优异；而 MVC 则更适合传统的请求-响应型 Web 应用。
2025-06-24 10:56:25
336
原创 Vite 在开发环境已经不需要打包了，为什么生产环境还要打包？
场景是否需要打包说明开发环境（Dev Server）❌ 否使用原生 ESM，无需打包生产环境（Build）✅ 是提升性能、压缩代码、兼容旧浏览器✅ 是必须通过打包实现部署上线✅ 是需要完整静态资源目录兼容性支持✅ 是需要打包 + 转译。
2025-06-23 15:18:48
652
原创 vue3哪些情况下ref会自动解包，哪些情况下不会自动解包
场景是否自动解包示例✅ 模板中使用{{ ref }}或v-model✅ 是✅ 在reactive()包裹的对象中✅ 是✅ 在computed中✅ 是✅ 在v-for中遍历✅ 是❌ 在普通对象中嵌套❌ 否❌ 在MapSet中使用❌ 否❌ 在类实例中使用❌ 否❌ 使用修改嵌套属性❌ 否❌ 使用❌ 否。
2025-06-23 11:28:39
246
原创 shallowReactive，shallowReadonly，toRaw()和markRaw()详解
API响应式层级是否可写是否解包嵌套对象典型用途reactive()深层响应式✅ 可写✅ 自动解包默认首选浅层响应式✅ 可写❌ 不解包性能优化readonly()深层只读❌ 不可写✅ 自动解包数据保护浅层只读❌ 不可写❌ 不解包控制只读范围toRaw()获取原始对象获取非响应式副本markRaw()排除响应式第三方对象、性能优化。
2025-06-23 11:14:40
290
原创 shallowRef，triggerRef和customRef()
API特点适用场景ref深层响应式，自动解包嵌套 ref默认首选，通用响应式shallowRef仅响应.value变化，不处理内部结构性能敏感、大对象优化triggerRef手动触发shallowRef更新修改内部属性后主动刷新完全自定义响应式行为高级定制，如防抖、异步加载。
2025-06-23 11:07:16
293
原创 React.Children
API用途map遍历并映射子节点forEach遍历不返回count计算子节点数量only断言只有一个子节点toArray转成数组操作是开发可复用组件、布局容器、插槽机制时不可或缺的工具，建议熟练掌握其常用方法。
2025-06-23 09:39:26
279
原创 Vue 3 中使用的主要 ES6 技术
ES6 特性是否使用主要用途Proxy✅响应式系统核心Reflect✅更安全地操作对象Symbol✅唯一键名、元编程MapWeakMap✅依赖追踪、缓存SetWeakSet✅去重、循环引用检测letconst✅变量声明箭头函数✅回调函数解构赋值✅参数提取默认参数✅函数参数类⚠️ 部分使用兼容性支持模块化✅导入导出模板字符串✅字符串拼接✅异步控制生成器函数⚠️ 构建时使用工具链。
2025-06-20 14:13:53
757
原创 vue3响应式如何解决的循环引用问题
特性WeakMapWeakSet存储键值对✅（键必须是对象）❌（只存储对象）弱引用✅ 键是“弱引用”✅ 成员是“弱引用”可遍历❌❌垃圾回收影响当键不再被其他地方引用时，自动从 WeakMap 中删除同理💡 它们都只接受对象作为键或成员，不能是原始类型（如字符串、数字等）。数据结构是否可遍历是否支持弱引用推荐用途Map✅❌需要遍历、持久化存储WeakMap❌✅缓存、元数据绑定、响应式系统Set✅❌去重、集合操作WeakSet❌✅标记对象、检测循环引用。
2025-06-20 14:11:09
373
原创 vue的filter过滤器
Vue.filter('filterName', function(value) { // 处理逻辑 return processedValue;});全局过滤器可以在整个 Vue 应用中的任何组件中使用。
2025-06-17 16:42:51
226
原创 Vue 应用的首屏白屏问题
查看浏览器控制台是否有 JS 报错；检查网络面板确认资源是否加载成功；确保 Vue 实例正确挂载到#root；检查路由配置是否正确；处理异步加载逻辑避免空白；如使用 SSR，确认服务端渲染是否正常。
2025-06-17 16:37:03
292
原创 vue-router的路由钩子
{ path: '/dashboard', component: Dashboard, beforeEnter: (to, from, next) => { // 只对该路由生效 } }🔹 适用于某个特定路由的权限控制。执行顺序钩子名称描述1beforeEach全局前置守卫，最早执行2路由级别守卫3组件进入前钩子（无this4createdmounted组件生命周期5所有守卫和异步组件加载完成后触发6afterEach导航完成后触发7参数变化时触发（可选）8离开组件前触发。
2025-06-17 16:05:46
414
原创 vue3的setup
功能选项式 APIsetup()语法糖是否需setup()函数❌✅❌是否需return❌✅❌是否支持await❌✅（需✅是否支持❌❌✅是否支持expose✅✅✅开发体验简单直观更灵活最简洁如果你使用的是 Vue 单文件组件 + TypeScript + Vite/Webpack 构建工具，推荐优先使用语法糖，可以极大提升开发效率和代码组织能力。
2025-06-17 16:02:11
605
原创 Vue 3 的defineComponent
props: {},// 可以使用 setup 函数处理逻辑})id: numberprops: {},// props.id 和 props.title 都有类型提示return {}})id: numberprops: {user: {},return {}})功能说明🧱 结构清晰明确定义组件边界和依赖🧩 类型安全在 TypeScript 中提供良好的类型推导🔁 逻辑复用支持 Composition API 模式下的逻辑拆分🛠️ 工具友好。
2025-06-17 15:55:33
453
原创 Vue 的 diff 算法
Vue 的是虚拟 DOM 更新的核心机制之一，主要用于在数据变化时高效地更新视图。它通过比较新旧两棵虚拟 DOM 树的差异，并尽可能复用已有的节点，从而提升性能。
2025-06-17 14:51:32
414
原创 vue中实现的设计模式
在 Vue 框架中，使用了以下几种主要的设计模式来提高代码的可维护性和扩展性：观察者模式（Observer Pattern） Vue 的响应式系统基于观察者模式实现。Vue 通过 或 监听数据的变化，并通知视图进行更新。发布-订阅模式（Pub/Sub Pattern） Vue 的事件系统（如 、 和 ）是发布-订阅模式的经典应用。组件之间可以通过事件进行通信，而不需要直接耦合。单向数据流模式（Unidirectional Data Flow Pattern） 在 Vue 组件中，父组件通过 pro
2025-06-17 13:57:08
120
原创 原型和原型链
每个构造函数都有一个prototype属性（函数对象特有），它是一个对象，用于保存所有实例共享的属性和方法。是一个对象。每个原型对象里面都有个construtor属性，该属性指向该原型对象的构造函数sayHello方法被定义在上。所有通过创建的实例都可以访问这个方法。概念描述prototype函数特有的属性，用于指定实例的原型对象__proto__对象的内部属性，指向其构造函数的prototype原型链查找对象属性时沿着__proto__向上查找的过程继承机制。
2025-06-17 13:50:27
752
原创 vue2和vue3如何监测数组的变化
Vue 2 使用劫持对象属性（Object.defineProperty）来实现响应式。对于数组，Vue不能通过直接劫持数组元素的变化Vue 3 使用Proxy实现响应式系统，相比 Vue 2 更加灵活和强大。特性Vue 2Vue 3响应式实现Proxy支持监听的数组操作仅限于变异方法（7 个）所有操作（包括索引赋值、length 修改）非变异操作是否响应❌ 否（需用$set✅ 是数组方法是否重写✅ 是❌ 否。
2025-06-17 13:35:40
360
原创 Vuex状态机
state是整个应用的“单一数据源”。在组件中通过或mapState辅助函数访问。特性描述单一状态树整个应用的状态都集中在一个对象中状态不可变状态只能通过 mutation 修改可预测性所有状态变化都有记录和可追踪支持模块化大型项目可通过模块划分管理复杂状态高扩展性支持插件系统（如日志、持久化、热重载）
2025-06-17 11:30:50
320
原创 vue3的slots
术语说明slots包含所有插槽内容的函数式对象获取默认插槽内容获取具名插槽内容useSlots()在中获取插槽作用域插槽支持通过参数传递数据给父组件插槽✅ 推荐实践：在封装可复用组件时，合理使用slots可提升组件灵活性和可扩展性。
2025-06-16 18:14:01
365
原创 Vue 中 keep-alive 详解与底层原理
是 Vue 中非常实用的功能，尤其在大型项目中对于提升用户体验和性能优化有显著作用。理解其工作原理有助于我们更好地使用它，并避免一些常见陷阱。✅ 推荐实践：结合实现更精细的组件状态管理，如数据刷新、定时器清理等。
2025-06-16 18:04:05
757
原创 $attrs和$listeners
attrs是一个对象，包含了父组件传递给当前组件的所有非 props 属性（attribute）未在props中定义的 HTML 原生属性（如classstyleid等）自定义数据属性（如data-*⚠️ 注意：如果属性已经在props中定义，则不会出现在$attrs中。$listeners是一个对象，包含父组件绑定到当前组件上的所有事件监听器。键是事件名值是对应的回调函数在 Vue2 中，可以使用$listeners将事件从父组件传递到子组件或更深层的 DOM 元素。特性Vue2Vue3。
2025-06-16 17:53:19
526
原创 vue2和vue3如何接收props
setup(props, { emit }) { // 可以使用 props.title 等 } }功能Vue2Vue3定义 props或获取 props 值this.title触发事件emit()监听事件（父组件）支持❌❌✅（Vue3.4+）
2025-06-16 16:38:32
332
原创 vue2,vue3的v-model
特性Vue2Vue3v-model原理valueinputmodelValue多个v-model❌ 不支持✅ 支持自定义名称方式使用model选项直接通过props和emit组合式 API 支持❌ 需要额外处理✅ 原生支持通过以上改进，Vue 3 的v-model更加灵活且易于维护，尤其适合复杂的组件交互场景。
2025-06-16 15:49:23
407
原创 vue3的defineModel和useModel
是 Vue3.4+ 提供的一个便捷 API，适合用于快速实现组件间的双向绑定，尤其适用于表单组件封装。虽然简化了代码，但在需要多个双向绑定或复杂逻辑时，仍推荐使用和显式管理数据流。
2025-06-16 15:40:07
583
原创 Vue2 与 Vue3 组件通信详解
props / $emitEvent Bus（事件总线） Vuex 状态管理provide / inject$root / $parent / $childrenlocalStorage / sessionStorageprops / emit defineModel (Vue3.4+) provide / inject Event Bus Pinia 状态管理Composition API（组合式 API）共享数据TeleportSusp
2025-06-16 15:31:26
364
原创 vue2和vue3获取组件实例的区别
特性Vue 2获取方式ref.value是否需暴露❌ 不需要❌ 不需要✅ 需要使用响应式❌ 非响应式❌ 非响应式❌ 非响应式支持 v-for 多个组件✅ 支持（返回数组）✅ 支持（返回数组）✅ 支持（返回数组）推荐程度✅ 旧项目使用✅ 旧风格项目使用✅ 新项目推荐Vue 2 使用$refs获取子组件实例；Vue 3 Composition API 则使用ref.value并通过显式暴露方法，更清晰、更可控。如果你正在开发 Vue 3 项目并使用，请务必记住使用。
2025-06-16 15:03:03
279
原创 Vue 3的Composition API 复用代码
这是最常见也是最推荐的复用方式，类似于 React 的自定义 Hook。方式适用场景是否推荐自定义 Hook复用逻辑和响应式状态推荐组件快速构建可复用 UI 组件推荐跨层级共享状态推荐用于局部共享Pinia/Vuex全局状态管理推荐用于大型项目函数参数注入构建通用逻辑模块推荐setup()手动组合需要兼容 Vue 2 或老项目可用但不优先。
2025-06-16 14:26:32
408
原创 onRenderTracked 和 onRenderTriggered
在组件因响应式依赖变化而渲染时调用一次。组件首次渲染或重新渲染时（即首次挂载或响应式数据变更导致更新）。可以用来追踪哪些响应式数据影响了组件的渲染。onRenderTracked((event) => { console.log('组件被渲染并追踪到了以下依赖:', event);});钩子名称触发时机是否可多次触发主要用途初次渲染 / 重新渲染时否查看组件渲染依赖了哪些数据响应式数据变化导致更新时是查看具体是哪个数据导致更新。
2025-06-16 13:52:49
350
原创 useRef的使用
在创建自定义 Hook 时，useRef可以用来存储内部状态，这有助于避免不必要的重新渲染。});访问 DOM：通过ref获取 DOM 元素。保存状态：保存不会导致重新渲染的数据。跨作用域通信：在不同副作用之间共享数据。控制子组件：暴露子组件的方法供父组件调用。优化性能：避免因数据变化引起的不必要的重新渲染。
2025-06-13 17:24:14
379
原创 react中hook和高阶组件的选型
场景推荐方式函数组件内共享逻辑（如请求、状态管理）✅ Hook类组件需要复用逻辑✅ HOC组件级别增强（如权限包裹、加载状态）✅ HOC想要避免组件嵌套✅ Hook多个组件共用一套副作用逻辑✅ Hook兼容老旧项目或第三方库✅ HOC。
2025-06-12 13:34:50
445
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人