- 博客(119)
- 收藏
- 关注
RSS订阅原创 Vue3中VueRouter基本用法及与Vue2中路由使用差异解析
Vue Router 在 Vue3 中被重写，使用了 Vue3 的 Composition API。使用上跟Vue2 相比有些不同，需要注意。Vue Router 在 Vue3 中被重写，使用了 Vue3 的 Composition API。这意味着你可以在任何组件中使用。Vue3 中的 Vue Router 对 Vue2 的 API 进行了一些更改，例如，Vue3 支持异步组件，这意味着你可以在路由配置中直接使用动态。来分别获取 router 实例和当前路由。
2024-06-15 19:54:20
411
原创 Vue 3 中的状态管理：使用 reactive 函数实现组件间通信和状态管理
在 Vue 3 中，使用 reactive 函数可以创建一个响应式对象，从而实现组件间的通信和状态管理。遵循这些规则可以确保状态管理的正确性和可维护性。这样，就可以在多个组件中共享和复用。
2024-06-15 19:18:13
439
原创 Vue3 中 props 与 emit 用法
在 Vue3 中，`props` 和 `emit` 的用法有所改变，主要的变化在于它们现在都通过 `setup` 函数来访问和使用。
2024-06-15 18:59:51
535
原创 Vue3 中 setup 函数与 script setup 用法总结
setup函数是一个新的组件选项，它作为在组件内使用 Composition API 的入口。是 Vue 3.2 引入的一项新特性，它提供了一种更简洁的方式来编写 Vue 组件。是两种新引入的编写组件的方式，它们都是 Composition API 的一部分。标签并不兼容，你不能在同一个组件中同时使用两者。script setup我们可以直接定义和导出组件选项，无需包装在。被解析后立即调用，但在 DOM 渲染之前。同时script setup还有一些其他的规则和限制。
2024-06-15 18:48:34
415
1
原创 Vue3新特性指南:探索新增指令、内置组件和改进
Vue3引入了许多新特性和改进,包括新增指令、内置组件以及Composition API、响应式系统的改进和更好的TypeScript支持等。通过学习和运用这些新特性,可以更高效、更灵活地构建现代Web应用。本文提供了这些新特性的概述和示例代码,帮助开发者快速上手Vue3。Vue.js是一款流行的JavaScript框架,用于构建现代Web应用。Vue3是Vue.js的最新版本,引入了许多新特性和改进。
2024-06-15 18:37:50
1115
原创 Vue3 生命周期函数及其与Vue2的对比总结
在 Vue3 中，你也可以使用新的生命周期函数 onRenderTracked 和 onRenderTriggered，它们可以帮助你跟踪和调试组件的渲染。Vue3 继续保留了 Vue2 的生命周期钩子，但在 Composition API（setup 函数）中，它们被改为了一组导入函数。与 Vue2 相比，Vue3 的生命周期函数提供了更好的类型支持和复用性。它们更加灵活，可以在组件之间共享和复用代码，这是在 Vue2 中无法做到的。在 Vue3 中，所有的生命周期函数都应在 setup 函数中使用。
2024-06-15 18:08:15
454
1
原创 Vue3 和 Vue2 对比分析及示例代码解析（初级）
Vue3 中提供了一系列的生命周期钩子，如 onMounted、onUpdated 和 onUnmounted，这些钩子在 setup 函数内部使用。Vue3 和 Vue2 的主要区别在于 Vue3 引入了 Composition API，这是一种新的组织和复用代码的方式。Vue3 使用 ref 和 reactive 来创建响应式数据，而 Vue2 中则是在 data 函数中返回一个对象。Vue3 的方法可以直接返回，而不需要像 Vue2 那样放在 methods 对象中。
2024-06-15 17:56:36
288
原创 Vue 3 的常用响应式 API 总结
在vue3.x版本中，setup函数就是vue3 组合式API的入口，换句话说就是在setup中的写的代码，就是组合式API 的写法。下面总结常用的与响应式相关的api, 帮助您在 Vue 3 中创建响应式应用程序。更多Vue3 API请参考官网：https://cn.vuejs.org/api/
2024-06-15 17:47:56
312
原创 Vue 3 的 setup 函数使用及避坑指南
Vue 3 的 setup 函数是 Vue 3 Composition API 的核心部分，它使得代码的复用和组织变得更加简单。
2024-06-15 17:38:34
586
原创 Vue 3 中的 toRef 和 toRefs 函数
函数是 Vue 3 中的两个非常有用的函数，它们可以帮助我们更好地管理组件中的响应式数据，并且可以提高组件的性能和用户体验。在使用这两个函数时，我们需要注意的是，它们只能将一个响应式对象的属性转换为引用，而不能将一个普通对象的属性转换为引用。但是，当我们直接在模板中使用这些属性时，会有一个问题：当这些属性的值发生变化时，组件将会重新渲染，即使其他属性的值没有发生变化。函数用于将一个响应式对象的属性转换为引用。函数的应用场景是在组件中使用响应式对象的属性时，尤其是在一个组件中需要使用多个响应式对象的属性时。
2024-06-03 16:32:44
482
1
原创 react中怎么为props设置默认值
在react中可以通过props来实现父子组件之间的数据传递。有些时候，需要给props一个默认值，当在使用组件的时候如果没有给数据，可以显示默认数据，让用户体验更好。哪么在react中，在class组件或函数式组件中应该如何为props指定默认值呢？
2024-05-20 12:07:46
715
原创 React useEffect Hook: 理解和解决组件双重渲染问题
useEffect运行了两次，并且你正在使用React 18或更高版本的严格模式（Strict Mode），这可能是因为在开发模式下，React会故意两次调用生命周期方法和函数组件来帮助发现副作用中的问题。运行两次并不一定是一个问题，除非它导致了不必要的副作用，如额外的API调用等。：在生产构建中，这个行为不会发生，它只是在开发模式下帮助你发现潜在的问题。：确保你的副作用函数中没有导致组件状态更新的操作，这可能会触发额外的渲染。：如果你确定你的应用没有副作用相关的问题，你可以从你的应用中移除。
2024-05-14 21:00:40
410
原创 React Router 路由配置数组配组持久化
在一些特定场景下,你可能需要将路由配置数组进行持久化,例如从后端动态加载路由配置或根据用户权限动态生成路由配置。这时,持久化路由配置数组就很有用,可以避免每次应用启动时重新获取或计算路由配置。需要注意的是,如果你的路由配置发生变化,你需要更新持久化存储中的数据。通过这种方式,你可以在应用程序启动时从持久化存储中恢复路由配置数组,从而避免每次都重新获取或计算路由配置。在应用程序启动时,你可以从持久化存储中读取序列化的路由配置数据,并使用。你可以使用任何持久化方案来存储序列化后的路由配置数据,例如。
2024-04-29 22:18:52
507
2
原创 Redux Toolkit 中持久化路由配置数组的实践指南
可以将路由配置数组保存到 Redux Toolkit 的 store 中,并使用 Redux Persist 持久化到本地存储中。每次应用程序启动时,你都可以从本地存储中恢复路由配置数据,从而避免重复获取或计算路由配置。需要注意的是,如果你的路由配置发生变化,你需要相应地更新 Redux store 中的路由配置数据。最后,你可以在应用程序中使用 Redux store 中的路由配置数据来渲染应用程序。在应用程序启动时,你可以从持久化存储中读取序列化的路由配置数据(如果有的话),使用。
2024-04-29 22:15:51
299
原创 Redux Toolkit 与 Redux Persist 结合:路由状态无法序列化的解决之道
无论采用哪种解决方案,关键是确保路由状态能够正确地序列化和反序列化,避免出现无法持久化或加载状态的问题。Redux Toolkit 虽然简化了 Redux 的使用,但在处理路由状态序列化问题时,仍需要采取类似于普通 Redux 的方式进行处理。如果你不需要持久化路由状态,可以在 Redux Persist 的配置中排除相关的 reducer。如果你需要持久化路由状态,你可以为路由状态定义自定义的序列化和反序列化函数,类似于处理普通 Redux 中的情况。函数,具体做法取决于你的路由状态结构。
2024-04-29 21:55:48
187
原创 React、React Router 和 Redux 常用Hooks 总结，提升您的开发效率！
Hooks 是 React 16.8 中引入的一种新特性，它使得函数组件可以使用 state 和其他 React 特性，从而大大提高了函数组件的灵活性和功能性。下面分别总结React、React Router 、Redux中常用的Hooks。
2024-04-29 21:31:24
1525
原创 使用 MobX 实现数据持久化：最佳实践与技巧！
MobX 本身不提供数据持久化功能，但是可以结合其他库或技术来实现数据持久化。可以使用localStorage 或 sessionStorage、IndexedDB、mobx-persist-store 库实现。
2024-04-29 21:09:02
575
原创 妙手解迭:React Store数据迭代难题
在 React 中无法直接迭代 store 中的数据时,你需要根据具体的数据结构采取适当的措施,如使用内置的对象方法或将数据转换为可迭代的形式。
2024-04-28 22:11:52
513
1
原创 React动态菜单权限控制完全指南
动态菜单权限控制是后台管理系统中的一个常见需求，它确保了不同角色的用户只能访问他们有权限查看的功能。组件会根据用户的权限渲染菜单项。如果用户没有对应的权限，相应的菜单项就不会被渲染。这种方法可以确保每个用户只能看到他们被授权访问的功能。
2024-04-26 09:11:29
721
原创 探索React Router:实现动态二级路由
我有一个路由配置的二维数组，想根据这个数组结合路由组件来动态生成路由，应该怎么样实现。在 React Router 6 中渲染二级路由的方式跟 React Router 65相比有一些变化,但核心思路仍然是利用 `Route` 组件和路由嵌套的方式。
2024-04-24 23:05:57
601
1
原创 Redux 状态持久化之 redux-persist 使用示例
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
2024-04-24 12:36:15
655
原创 在Redux Toolkit中使用redux-persist进行状态持久化
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文就 Redux Toolkit 中使用 `redux-persist` 持久化进行说明
2024-04-24 12:29:28
1037
原创 在React函数组件中使用错误边界和errorElement进行错误处理
ErrorBoundary 是一种基于类的组件,可以捕获其子组件树中的任何 JavaScript 错误,并记录这些错误、渲染备用 UI 而不是冻结的组件树。提供了一种更简单的方式来处理根组件中的错误。你可以根据项目的需求选择合适的方式。如果需要为嵌套的组件树提供错误边界,你仍然需要使用。组件树中发生错误,React 会自动卸载组件树,并替换为传递给。是一种更通用的错误处理方式,可用于任何组件及其子组件树。在 React 18 中,你可以在根组件上使用。
2024-04-24 11:39:08
689
原创 玩转React路由,教你根据角色动态生成路由
用户登录成功后，我已经获取到了用户的角色，并且根据角色获取到了用户的拥有的权限路由。我想在登录成功后动态生成路由，来实现不同角色的用户,具备不同的权限，应该怎么实现？
2024-04-23 19:54:30
381
1
原创 React Router 6 + Ant Design:构建基于角色的动态路由和菜单
根据用户的角色动态生成路由和菜单,实现基于角色的访问控制。
2024-04-22 21:38:54
570
1
原创 在React Router 6中使用useRouteLoaderData钩子获取自定义路由信息
在 React Router 6 中怎么像vueRouter一样，可以在配置路由的时候，定义路由的元信息(附加信息)？答案是可以的。稍有些复杂。先需要使用 createBrowserRouter 或 createHashRouter 来创建路由器实例，然后通过RouterProvider来加载路由，通过为每个路由定义了一个 loader 函数,用于返回自定义的路由信息，最后通过useRouteLoaderData 钩子来获取自定义的路由信息。
2024-04-22 20:50:07
836
原创 React Router 6 中的 6 种路由配置方式：数组、代码分割、对象、函数和服务器加载
React Router 6 是一个强大的路由库，提供了多种配置路由的方式，可以满足不同的应用场景和需求。如可以使用 createBrowserRouter 或 createHashRouter 函数，以数组形式定义嵌套路由、使用 useRoutes hook 和 React.createElement，可以在函数组件中动态创建路由配置对象，实现高度灵活和可编程的路由配置。实现类似VueRouter路由的配置方式。
2024-04-21 21:26:48
1812
原创 React Router 6 路由重定向与编程式导航指南
在 React Router 6 中实现路由重定向、跳转的常见我方式有2大方式：Navigate组件或useNavigate hook。
2024-04-21 19:48:25
1423
原创 React vs Vue.js:两种流行框架背后的设计哲学差异
Vue.js 和 React 虽然都是流行的前端框架,但在设计哲学上有一些显著差异。这些差异源自它们不同的设计目标和出发点。
2024-04-21 19:07:38
748
1
原创 探索 Redux Toolkit 参数传递的4种途径
Redux Toolkit提供了多种灵活的方式来传递参数,主要包括：通过Action Creator函数传参(action.payload)、在extraReducers中传参(action.meta.arg)、通过getState获取参数、action.meta传参、与action.payload类似,传递额外元数据。
2024-04-21 17:11:13
412
原创 @reduxjs/toolkit进阶指南
虽然@reduxjs/toolkit为Redux提供了开箱即用的最佳实践,但它也内置了一些强大的功能,可以极大简化Redux在复杂场景下的使用：内置了Immer简化不可变更新状态、使用createAsyncThunk工具简化了异步操作、提供了createSelector来创建可组合的派生状态选择器，对输入进行缓存和可组合化处理,使得选择器可以高效地重用之前的结果,提取和复用衍生数据计算逻辑。
2024-04-21 13:39:54
372
1
原创 Redux入门:使用@reduxjs/toolkit构建React应用程序状态管理
传统的Redux方案(redux+react-redux)设置和使用过程比较繁琐。幸运的是,Redux官方团队推出了@reduxjs/toolkit,这个工具包极大简化了Redux在React项目中的使用。其核心优势在于：减少样板代码、更简洁的语法、开箱即用的异步处理、不可变更新友好以及良好的开发者体验。
2024-04-21 13:03:47
754
原创 antdesign 组件中的文字默认是英文怎么办
antdesign（antd）目前的默认文案（语言）是英文，如果需要使用其他语言，需要引入语言包，进行一下配置即可。通过在应用的最外层包裹ConfigProvider组件，并为其locale属性传入中文语言包zh_CN来实现。这样，所有的Ant Design组件都将默认使用中文显示。
2024-04-18 18:14:17
690
原创 ERROR in [eslint] reorder to top import/first
在react开发的时候，导入组件、函数时报错：Import in body of module;reorder to top import/first …解决： 变量的声明，要放在import之后。
2024-04-18 17:54:03
349
原创 React Ant Design 中内置、自定义表单验证的火速上手
如何在 React Ant Design 中结合自定义验证规则和内置验证规则,实现复杂的表单验证逻辑。该示例涵盖了表单创建、验证规则定义、表单提交等完整的使用场景。掌握在 React Ant Design 中进行表单验证的各种技巧。
2024-04-18 17:25:59
2195
原创 React 组件生命周期对比：Class vs. 函数式
在 React 中，Class 组件和函数式组件的生命周期存在一些差异。通过对 React 中 Class 组件和函数式组件的生命周期进行对比，详细探讨了它们在设计哲学、生命周期管理和开发技巧上的异同。全面了解 React 中两种组件类型的生命周期特点，以及如何灵活运用它们来构建现代化的 React 应用。
2024-04-13 16:13:55
565
原创 React Hooks 全解: 常用 Hooks 及使用场景详解
React 中常用的 10 个 Hooks,包括 useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useLayoutEffect、useImperativeHandle 和 useDebugValue。这些 Hooks 涵盖了状态管理、副作用处理、性能优化、DOM 操作等各个方面,为开发者提供了强大的工具,大幅提高了开发效率和代码质量。让我们一起探索 React Hooks 的强大功能,提升您的 React 开发水平。
2024-04-13 15:36:00
1831
1
原创 一文掌握 React 开发中的 JavaScript 基础知识
在 React 开发中掌握掌握基础的 JavaScript 方法将有助于编写出更加高效、可维护的 React 应用程序。在 React 开发中使用 ES6 语法可以带来更简洁、可读性更强、功能更丰富,以及更好性能和社区支持等诸多好处。这有助于提高开发效率,并构建出更加优秀的 React 应用程序。
2024-04-12 22:44:31
717
1
原创 MobX进阶:从基础到高级特性全面探索
MobX 提供了丰富的高级特性,包括计算属性、反应式视图、中间件、异步流程控制、依赖注入和动态 observable 、在服务端渲染和 TypeScript 支持方面提供了良好的集成。这些特性进一步增强了 MobX 在状态管理方面的灵活性和可扩展性,使其成为一个功能强大、易于使用的状态管理解决方案。当与 React 组件集成时,TypeScript 也可以为组件的 props 和状态提供更好的类型检查支持。可以让我们编写同步风格的异步代码,同时仍能享受 MobX 的自动依赖追踪和状态更新机制。
2024-04-12 18:09:53
684
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人