- 博客(20)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 React 和 Vite 环境下 TailwindCSS 的配置指南
【代码】React 和 Vite 环境下 TailwindCSS 的配置指南。
2024-11-27 13:44:26
757
原创 Vue3中的ref和reactive
所以，vue2并不是不能监测数组的变化，使用ref定义数组举例如下const tableData = ref([]) // 定义const { data } = await getTableDataApi() // 模拟接口获取表格数据tableData.value = data // 修改-- Vue3模板引用使用 -->图中以我们常用的表格数据举例，可以看到，ref定义数组与定义基本数据类型没什么差别，接下来看看reactive。
2024-11-08 14:30:10
472
原创 vue常见问题总结
所以，vue2并不是不能监测数组的变化，而是不能监听直接给数组赋值的这种变化。因为性能问题，vue2并没有使用来监测数组，而是通过重写数组方法的这一方式，来监测数组变化。Vue3使用Proxy代替了Object.defineProperty，Proxy可以监听到对象的所有属性，包括新增和删除操作。Vue3使用了WeakMap来存储依赖关系，避免了Vue2中Watcher的内存泄漏问题。Vue3支持了多个根节点的组件，可以更方便地进行组件的复用和组合。
2024-11-08 11:12:57
848
原创 TypeScript 之 interface 和 type 的区别
官方推荐用 interface，其他无法满足需求的情况下用 type。但联合类型 和 交叉类型 是很常用的，所以避免不了大量使用 type 的场景，一些复杂类型也需要通过组装后形成类型别名来使用。所以，如果想保持代码统一，还是可选择使用 type。通过上面的对比，类型别名 其实可涵盖 interface 的大部分场景。
2024-11-07 12:17:13
847
原创 TypeScript 常见问题
是一种由微软开发的开源编程语言，它是JavaScript的超集。TypeScript通过添加静态类型、类、接口和模块等功能，使得在大型应用程序中更容易进行维护和扩展。它可以被编译为纯JavaScript，从而能够在任何支持JavaScript的地方运行。使用TypeScript可以帮助开发人员在编码过程中避免一些常见的错误，并提供更好的代码编辑功能和工具支持。
2024-11-05 14:34:21
331
原创 react Router
下文按 hash 模式演示范例，若需切换为 history 模式，只需将 src/main.jsx 中的 createHashRouter 全部替换为 createBrowserRouter 即可。添加参数，以问号 (?) 开始，每个参数由等号 (=) 分隔名称和值，多个参数之间用 (&) 号分隔。在路由配置数组的末尾添加 404 页面的映射，path 值为。当访问到未定义的路由页面时，页面显示 404 页面,即配置子路由，如在首页指定区域渲染子路由的页面。指定子路由页面的渲染位置。
2024-11-01 14:28:50
691
原创 react useRef介绍
current 属性值发生变化，不会触发组件更新渲染（此特征与 useState 不同，useState 声明的变量发生变化，会触发组件更新渲染！组件更新渲染再次执行 useRef（初始值） 时，不会将 current 属性值恢复为初始值（此特征与 useState 相同！修改current 属性值的语句，一般写在 useEffect 或事件处理函数中。创建了一个 current 属性值为 0 的 ref 对象。用于在函数组件中获取对 DOM 元素或自定义组件实例的引用。
2024-11-01 12:34:36
372
原创 react useCallback介绍
用于缓存回调函数，避免在每次渲染时重新创建。接收一个回调函数和依赖项数组，返回缓存后的回调函数。的依赖项参数用于指定哪些变量的变化会导致生成新的回调函数。在这个例子中，缓存了回调函数，并且指定了依赖项数组为[count]。这意味着只有当count发生变化时，才会生成新的回调函数。
2024-11-01 12:18:12
742
原创 react useMemo介绍
注意事项：若 userInfo 是用 useState 声明的响应式变量，则内存地址不会重新生成，所以不会引发子组件的重新渲染。memo() 函数的本质是通过校验Props中数据的内存地址是否改变来决定组件是否重新渲染组件的一种技术。每次父组件重新渲染时，引用类型的数据 userInfo 的内存地址都会重新生成，导致子组件重新渲染。父组件向子组件传递了引用类型的数据，但仍想缓存子组件，则需使用 useMemo。为什么添加了 memo ,子组件2依然重新渲染了呢？因为父组件向子组件2传递了引用类型的数据。
2024-11-01 11:22:31
241
原创 React中的useEffect
这个依赖项数组的目的是帮助 Reac t优化性能，确保副作用函数仅在依赖项发生变化时执行，而不是在每次渲染时都执行。清除副作用的逻辑，写在 useEffect 内回调函数的 return 后面，需要注意的是，return 后必须是一个函数！如果省略依赖项数组，副作用函数将在每次组件重新渲染时都执行，这可能导致性能问题和不必要的副作用。如果依赖项数组不为空，副作用函数将在组件挂载时执行一次，并在依赖项发生变化时执行。如果依赖项数组为空，副作用函数仅在组件挂载和卸载时执行，相当于类似于类组件中的。
2024-10-31 14:22:53
461
1
原创 React useState介绍
useState用于在函数组件中添加状态。返回一个包含当前状态值和更新状态值的数组。与vue的响应式原理不同，vue通过proxy劫持数据的getter和setter实现响应式，如vue3的reactive()State的创建使用了 const [变量名，变量setter] = useState(初始值) 的形式定义响应式数据State是隔离且私有的渲染多个相同组件，其state值是独立的，不受其他组件的影响。渲染和提交应用启动时进行第一次渲染，届时所有组件和节点都会进行渲染；
2024-10-31 13:04:45
789
原创 Vue3+vite打包后页面空白问题
二、vue3 vite打包后页面白屏控制台报错Access to script at 'file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist。1 安装兼容插件 @vitejs/plugin-legacy。原因：资源路劲问题修改：vite.config.ts。在vite.config.ts 中进行配置。然后到 dist目录下在cmd 中运行。想要查看，可以安装一个本地服务器插件。四、nginx.conf。
2024-05-16 16:51:03
3107
1
原创 vue2中provide inject异步数据传递处理
（即：祖先向下传递数据）、多个子组件或孙子级组件都要使用顶级或父级的数据时，使用provide 和 inject 组合无疑是很方便的一种做法了，但如此只是注入的初始值，并不能随时拿到数据源的实时更新。孙子组件：在inject后，使用计算属性computed计算出一个新值。在provide时，返回一个方法，方法中 return 目标数据。当vue文件中存在多级的。
2024-04-17 14:29:57
764
原创 Vue 3.0x中的Suspense和defineAsyncComponent
然后，我们在父组件中使用 Suspense 组件，将默认内容包裹在 template #default 中，将加载中状态包裹在 template #fallback 中。在组件中加入Suspense，可以让异步组件可以渲染出加载状态，并且如果异步组件加载时出现错误，也能够处理这些错误。当 AsyncComponent 正在加载时，Suspense 组件会显示 LoadingSpinner 组件，直到异步组件加载完成并准备就绪，然后再显示 AsyncComponent 的内容。
2024-03-07 16:36:28
451
1
原创 vue3父子组件和provide、inject数据异步问题
vue3父组件数据是请求后端获取的数据时，就会出现数据不实时响应。因为在获取数据之前子组件已经加载，渲染完成了。所以这个时候接受父组件的异步数据不会实时更新。要解决这个问题就得用到watch监听函数了，利用watch监听父组件传过来的值，当值发生变化时，执行相应的操作。
2024-03-07 15:37:49
1388
原创 vue3.0组件之间通信
defineEmits 用于子组件向父组件传递消息，在父组件中，只需要监听子组件的自定义事件，然后执行相应的逻辑即可。在子组件中可以使用defineProps声明需要接收父组件的哪些props，它需要定义一个包含props字段的对象，每个字段定义默认值和类型等信息。defineProps 只能在 setup 中使用，且只能在 setup 的顶层使用，不能在局部作用域使用。获取用setup语法糖创建的子组件实例时，获取的实例是没有子组件自定义的属性和方法的，此时我们需要通过。来暴露子组件的属性和方法。
2024-03-07 14:37:19
983
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人