- 博客(184)
- 收藏
- 关注
RSS订阅原创 git 查看远程所有分支
注意，要执行上述命令，你需要确保已经初始化了远程仓库，并且远程仓库已经被添加到了你的本地 Git 配置中。如果还没有添加远程仓库，可以使用。表示 “all”，即列出所有分支，包括本地的和远程的。这将列出所有远程分支，格式通常为。可以帮助区分不同类型的分支。
2024-10-11 11:43:59
1842
原创 js 一分钟熟悉ResizeObserver用法
是一个 JavaScript API，它允许你在不使用轮询（即定时器或请求动画帧）的情况下监听元素尺寸的变化。这对于实现高效的布局更新或者响应式设计非常有用。下面是一个基本的。
2024-09-27 09:49:56
676
原创 vue provide inject 例子
功能来跨越组件层级传递数据。这对于跨越多个组件层级注入值非常有用，而无需手动一层层传递 props。的 API 稍微有所不同，它们现在返回的是函数而不是对象。请确保在实际项目中根据具体需求调整代码，并考虑性能和可维护性的影响。接收任何 props，它仍然可以访问到提供的。首先，我们创建一个父组件，并在这个组件中使用。需要注意的是，在 Vue 3 中，以上就是在 Vue.js 中使用。接下来，我们在子组件中使用。接收这个值，并将其命名为。Vue.js 提供了。
2024-09-25 17:52:01
248
原创 数据结构 栈和队列的认识
栈和队列都是非常有用的数据结构，它们各自有着独特的特点和应用场景。栈由于其LIFO的性质，非常适合用于需要回溯的应用；而队列由于其FIFO的性质，则适合用于需要按照顺序处理数据的情况。理解这些基本概念有助于在实际编程中做出合适的选择。
2024-09-19 11:10:56
290
原创 css有哪些浏览器兼容性问题
解决这些兼容性问题的方法包括使用CSS前缀工具自动添加浏览器前缀、使用特性检测来确定是否应用某些样式、使用polyfills来填补缺失的功能，以及编写条件性CSS以适应特定的浏览器环境。另外，使用像Bootstrap这样的框架可以帮助处理大部分兼容性问题。随着浏览器的发展，大多数现代浏览器已经很好地支持了CSS3的特性，但在开发时仍需考虑目标用户群体所使用的浏览器版本。CSS 在不同浏览器中的兼容性问题主要源于浏览器对CSS规范的支持程度不一。
2024-09-19 10:17:16
703
原创 js有哪些浏览器兼容性问题
为了解决这些问题，开发者通常会使用一些策略，比如使用polyfills来填补API支持上的空缺，使用特性检测来动态地决定是否使用某个功能，或者使用工具如Babel来将现代JS代码转换成向后兼容的形式。此外，还有像jQuery这样的库，它提供了跨浏览器的一致性接口，简化了JavaScript开发。不过，随着现代浏览器对Web标准的支持越来越好，兼容性问题也在逐渐减少。JavaScript（JS）在不同的浏览器中可能会遇到各种兼容性问题，这主要是因为不同的浏览器对于Web标准的支持程度不同。
2024-09-19 10:16:04
832
原创 tcp和udp的区别
TCP（Transmission Control Protocol，传输控制协议）和 UDP（User Datagram Protocol，用户数据报协议）是两种常用的传输层协议，它们分别用于不同的场景，各有特点。
2024-09-19 10:00:06
384
原创 js的es6有哪些
ECMAScript 6（通常称为 ES6 或 ES2015）是 JavaScript 语言的一个重要版本，它引入了许多新的特性和语法改进，使得 JavaScript 更加现代化并且更易于编写复杂的程序。这些只是 ES6 中的一部分新特性，实际上还有很多其他改进，比如二进制和八进制文字、Array.from 方法等。ES6 的推出极大地提升了 JavaScript 的功能性和可用性，使得它成为现代 Web 开发的重要组成部分。
2024-09-14 16:46:49
359
原创 redux 的 toolkit使用教程和demo
React 的是一个简化 Redux 开发的工具包，它提供了一系列的简化方法来处理常见的 Redux 模式。下面我将指导你如何使用创建一个简单的计数器应用。
2024-09-13 19:29:56
463
原创 一个pinia的demo
当然可以！下面我将展示一个简单的Pinia应用示例，包括如何设置一个store，并在一个简单的 Vue 组件中使用这个 store。首先，你需要安装 Pinia 和 Vue。接下来，我们创建一个简单的 Pinia store 示例，并在 Vue 组件中使用它。
2024-09-12 10:06:23
362
原创 vuex和pinia的区别
取决于项目的具体需求、团队的偏好以及是否正在使用 Vue 3。如果项目已经在使用 Vue 2 并且已经习惯了 Vuex 的工作方式，那么继续使用 Vuex 可能会更加合适。而对于新的 Vue 3 项目，或者对于希望简化状态管理流程的团队来说，Pinia 可能是一个不错的选择。
2024-09-12 10:04:25
320
原创 js ResizeObserver作用
是一个 JavaScript API，它允许开发者观察 DOM 元素尺寸的变化，而不需要显式地进行定时轮询。这对于实现响应式布局、动态调整元素大小或者其他依赖于元素尺寸变化的功能非常有用。
2024-09-11 22:44:16
469
原创 vue toRef 作用和例子
toRef是 Vue 3 中的一个实用函数，用于从响应式对象中创建一个指向该对象属性的响应式引用（ref）。这个函数的主要用途是在保留响应性的同时，将对象中的某个属性暴露给另一个作用域或组件。
2024-09-11 22:26:23
473
原创 生产环境 前端开发如何处理跨域问题
在生产环境中，前端开发处理跨域问题通常需要结合后端服务的配合。跨域问题源于浏览器的同源安全策略（Same-Origin Policy），它限制了一个域下的文档或脚本如何与另一个源的资源进行交互。
2024-09-10 22:53:24
627
原创 v-lazyload指令 实现思路
在 Vue 组件中注册自定义指令v-lazyload// 在绑定元素的父组件的 VNode 及其子 VNode 全部挂载后调用// 设置图片加载完成后的回调// 图片加载完成后可以移除观察器// 设置图片加载失败后的回调console.error('图片加载失败');// 使用 IntersectionObserver API 观察元素// 替换为实际图片地址});});},},},
2024-09-10 22:51:40
574
原创 网页首屏加载时间 有什么相关指标
以上这些指标可以帮助你了解网页加载过程中的不同阶段，并指出可能存在的瓶颈。通过优化这些指标，可以显著改善用户的网页加载体验。在实际应用中，通常会结合使用多个指标来全面评估网站性能。网页首屏加载时间是衡量网站性能的一个重要方面，它直接影响用户的体验。为了评估网页的加载速度，Web 性能领域定义了一系列相关的指标。
2024-09-10 22:39:10
508
原创 vue 项目中 为什么v-if和v-for要避免使用在同一元素上
同时使用在同一元素上是不被推荐的，主要是因为这样使用会导致一些性能和逻辑上的问题。总之，尽量通过数据处理来减少模板中的逻辑复杂度，可以提高应用的性能，并使代码更易于理解和维护。，如果只是简单地切换元素的可见性而不涉及元素的存在与否。属性，元素仍然存在于 DOM 中，这在某些情况下可能不是最优选择。，以控制一组元素的显示与否，而不是针对每个元素使用。) 对数组进行过滤，然后只使用。在 Vue.js 项目中，来渲染经过筛选后的数组。
2024-09-10 22:36:54
374
原创 React useCallBack用法
是 React 中的一个 Hook，它返回一个 memoized（记忆化的）回调函数。这个 Hook 主要用来优化性能，尤其是在父组件重新渲染时，避免传递新的回调函数给子组件，从而防止不必要的渲染。
2024-09-09 18:16:57
470
原创 React 生命周期有哪些
React 组件的生命周期可以分为几个阶段，每个阶段都有对应的生命周期方法或生命周期钩子。React 16.3 版本引入了新的生命周期方法，并且在 React 16.8 版本中引入了函数组件的 Hooks，这让生命周期的概念对于类组件和函数组件有所不同。
2024-09-09 16:27:37
437
原创 React diff算法原理
React 使用一种称为 “Reconciliation” 的过程来确定虚拟 DOM 树中的哪些部分发生了变化，从而最小化实际 DOM 更新的工作量。这个过程的核心是实现了一个高效的 diff 算法，通常被称为“Fiber”机制的一部分。虽然它并不完全等同于经典的 diff 算法（如 Myers’ diff algorithm 或 Hunt-McIlroy algorithm），但其目标是相似的：找出两个树结构之间的差异。
2024-09-09 16:26:17
978
原创 前端项目中 vite的优化有哪些
Vite 是一个由 Vue.js 作者尤雨溪开发的现代化前端构建工具，它利用了浏览器原生的 ES 模块支持来提供更快的开发体验。Vite 的一大特点是启动速度快，因为它采用了模块热替换 (HMR) 技术。尽管 Vite 本身已经很高效，但在生产环境中仍然有一些可以进行的优化来进一步提高性能。
2024-09-09 15:46:07
820
原创 webpack 写一个自定义的loader demo
首先，你需要创建一个Node.js模块作为Loader。这个模块应该导出一个函数，该函数接收内容并返回修改后的内容。假设我们要创建一个名为// 处理内容// 必须返回处理过的内容。
2024-09-09 13:38:18
510
原创 webpack CachePlugin使用
是 Webpack 从 v5 开始引入的一个插件，用于提高构建性能。它的主要目的是缓存先前构建的模块信息和其他元数据，以便在未来的构建中重用，从而减少编译时间和资源消耗。命令时，它将会尝试从缓存中加载已知的信息来加快构建速度。如果缓存中的信息不再适用（例如，由于配置或源代码发生了变化），Webpack 将会重建缓存。首先，确保你的项目中安装了 Webpack 5 或更高版本。，你需要确保你的 Webpack 版本是 5 或更高版本。根据你的具体需求，可能还需要进一步调整配置。
2024-09-09 11:54:21
409
原创 前端项目中webpack的优化有哪些
以上是常见的Webpack优化方式，具体选择哪些措施取决于项目的实际需求以及团队的技术栈。在进行优化时，建议逐步实施，并持续监控优化的效果，确保每次改动都对项目的构建时间和生产环境的表现有所改进。在前端项目中使用Webpack进行构建时，有许多方法可以用来优化构建流程、提升性能以及减小最终包的大小。
2024-09-09 09:38:16
852
原创 React withRouter 作用
在React中，withRouter是库中的一个高阶组件（Higher-Order Component, HOC），它用于将 React 路由器的上下文（context）传递给那些没有直接位于组件内的组件。这样做的目的是为了让这些组件能够访问到路由器提供的属性，如matchlocation和history等。withRouter。
2024-09-08 21:10:25
633
原创 https是如何加密的
公钥加密，私钥解密：服务器的公钥用于加密对称密钥，服务器的私钥用于解密。对称密钥加密数据：一旦建立了对称密钥，客户端和服务器使用这个密钥来加密和解密数据。证书验证：证书确保了服务器的身份，防止中间人攻击（MITM）。通过这种方式，HTTPS确保了数据在传输过程中的安全性和隐私性，使得第三方无法窃取或篡改传输的内容。
2024-09-07 20:52:29
414
原创 一文理解 requestAnimationFrame API
requestAnimationFrame 是浏览器提供的一种用于动画的API，它在下一个动画帧准备好时执行回调函数。当你调用requestAnimationFrame时，浏览器会标记你的回调函数以便在下一个动画帧准备好时执行。另外，requestAnimationFrame 返回一个 long 整数，表示定时器的唯一ID，可以使用cancelAnimationFrame来取消这个定时器。理解 requestAnimationFrame 的关键是要知道它是如何工作的以及它与定时器的不同之处。
2024-09-07 17:31:58
214
原创 js的requestAnimationFrame 详解
是一个浏览器提供的 API，它可以让开发者请求浏览器在下一次重绘之前调用一个指定的函数更新动画帧。这个方法对于创建平滑的动画非常有用，因为它会同步到浏览器的重绘周期，从而提高性能和视觉效果。
2024-09-07 17:28:54
721
原创 一文了解vue 和react框架对比
Vue 和 React 在许多方面都有相似之处，尤其是在组件化的思想、状态管理和渲染优化等方面。不过，它们在实现细节上有差异，React 更加关注于函数式编程的思想，而 Vue 则更加注重声明式的 API 设计。两者都有各自的生态系统和最佳实践，选择哪个框架/库取决于项目需求和个人偏好。
2024-09-07 16:42:05
1181
原创 一文了解React 的memo 、useMemo详细用法
memo用于包装函数组件，以避免在props没有变化时的重新渲染。useMemo用于缓存一个计算结果，以避免每次渲染时都重新计算，特别是在计算成本较高的情况下。正确使用memo和useMemo可以显著提高React应用的性能，尤其是在大型应用中，通过减少不必要的渲染和计算可以带来明显的性能提升。然而，过度使用这些优化也可能导致代码变得难以理解和维护，因此在使用时应谨慎评估其必要性。
2024-09-07 16:09:00
614
原创 react PureComponent说明和用法
是一个有用的工具，可以帮助优化应用程序的性能。然而，它也有一些限制，尤其是在处理复杂的props或state时。因此，在使用时，需要权衡性能优化和代码的可读性及可维护性。
2024-09-07 12:49:56
582
原创 react-router-dom Prompt组件的用法
Prompt>组件是库中的一个组件，它主要用于阻止用户在未保存更改的情况下离开当前页面或路由。当用户尝试导航到其他地方时，<Prompt>组件会弹出一个对话框询问用户是否确定要离开当前页面。<Prompt>
2024-09-07 10:30:16
529
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人