吕彬-前端-CSDN博客

原创 Vite+Vue 3 环境变量配置

在开发 Web 应用时，我们常常需要根据不同的环境（如开发、测试、生产）进行不同的配置。Vite 提供了灵活的环境变量配置机制在一个特殊的 import.meta.env对象上暴露环境变量，这些变量在构建时会被静态地替换掉。让我们可以轻松管理这些差异。

2024-07-24 08:43:46 477

原创前端开发大屏适配几种方案

假设设计稿尺寸为 1920*1080，直接使用 vw 单位，屏幕的宽默认为 100vw，那么100vw = 1920px， 1vw = 19.2px。

2024-07-23 19:43:25 1157

除去initial默认、inherit继承和unset还原这 3 个所有 CSS 属性都可以取的值外，还有另外的 16 个具体的取值，对应不同的混合效果。// 正常// 正片叠底// 滤色// 叠加// 变暗// 变亮// 颜色减淡// 颜色加深// 强光// 柔光// 差值// 排除// 色相// 饱和度// 颜色// 亮度// 默认// 继承// 还原如果不是专业的 PSer 天天和混合模式打交道，想要记住这么多效果，还是挺困难的。

2024-07-19 13:01:33 665

原创 js实现无限滚动加载数据

entries是传递给回调函数的一个参数，它是一个包含对象的数组。每个对象表示一个被观察目标元素的最新交叉状态（即目标元素与根元素或视口的交集）。IntersectionObserverEntry 对象每个time一个时间戳，表示交叉状态变化的时间戳，精确到毫秒，通常用于性能测量。target被观察的目标元素，即观察器正在观察的具体 DOM 元素。rootBounds一个对象，表示根元素的边界框。如果根元素是视口，则表示视口的边界框。一个对象，表示目标元素的边界框，即元素在视口中的位置和尺寸。一个。

2024-07-16 17:26:59 729

原创 Vue 3中 watch 和 watchEffect的区别？

在 Vue 3 中，响应式系统允许我们声明性的绑定数据和 DOM，当数据变化时，DOM 也会自动更新。为了实现这一点，Vue 提供了特殊的 API，其中包括 reactive 和 ref，用于分别创建响应式对象和响应式基本类型值。在这些基础之上，我们可以使用 watch 和 watchEffect 来监听数据的变化并执行相应的逻辑。

2024-07-12 13:07:35 676

原创 vue3实现在style中使用响应式变量

vue2的时候需要在style模块中访问script模块中的响应式变量，为此不得不使用css变量去实现。现在vue3已经内置了这个功能啦，可以在style中使用v-bind指令绑定script模块中的响应式变量。

2024-07-11 14:16:33 729

原创 Vue2中的mixins和extends是如何区别和使用的

Vue2中的mixins和extends时，这是两个非常重要的概念，它们都可以帮助我们更好地组织和复用Vue组件的代码。在本文中，我们将深入探讨mixins和extends的区别以及如何使用它们。

2024-07-08 11:10:52 322

原创前端跨域问题解决方案

跨域产生的原因是由于浏览器的同源策略，即当页面的源和页面运行过程中加载的源不一致时，浏览器会出于安全考虑对跨域的资源访问进行限制。这种限制特别是对ajax的影响最为明显，默认情况下，它不允许ajax访问跨域资源。

2024-07-08 10:53:15 1158

原创 vue如何使用自定义插槽slot

Vue 3 中 v-slot 语法是标准用法，即使对于默认插槽也是如此，尽管默认插槽在子组件中可能不需要显式的。是用来实现组件内容分发的一个关键特性，它允许你在父组件中定义一块内容，然后在子组件中决定如何展示这块内容。Vue 3 对插槽的使用进行了简化，并推荐使用新的 v-slot 语法，即使对于默认插槽也是如此。Vue 3 中插槽的改进旨在简化API并提高可读性，同时保持了Vue组件间内容复用的强大能力。默认插槽是最基本的用法，当你在一个组件中没有明确指定插槽名称时，内容将会被分配到默认插槽。

2024-07-04 15:52:51 567

原创 es6之Proxy实现观察者模式

ES6中的Proxy是一种用于创建代理对象的特殊对象。它允许我们定义自定义行为，例如拦截和修改对象的默认操作。Proxy可以用于拦截对象的各种操作，包括属性访问、赋值、函数调用等。Proxy的作用是在目标对象之前架设一层拦截，可以对目标对象进行各种操作的拦截和自定义处理。通过使用Proxy，我们可以实现对目标对象的访问控制、数据验证、属性劫持等功能。Proxy通过使用一个代理对象来包装目标对象，并提供了一组钩子函数（也称为“陷阱”），这些钩子函数可以在代理对象上进行操作。

2024-07-02 15:21:53 1334 2

原创 TypeScript一些特性让代码更优雅

TypeScript不仅仅是JavaScript的类型超集，它还提供了一系列强大的高级特性，可以显著提高代码的质量和可维护性,掌握TypeScript的这些高级功能，不仅可以让你的代码更加健壮，还能大大提升你的开发效率。赶紧来看看吧！

2024-07-01 09:30:00 806

原创前端页面防止它人代码调试

这段代码展示了如何使用立即执行函数表达式 (IIFE) 和 setInterval 方法，通过在短时间内持续触发 debugger 语句来迫使调试器频繁中断，从而使调试变得极为困难。同时，通过递归调用 ban 函数进一步增加了复杂性，即使捕获到异常也会继续执行，确保防护措施持续生效。如果递归调用过程中出现错误（例如栈溢出），错误会被捕获并忽略，不会终止程序执行。老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！今天分享一段 JS 代码片段，是防止代码被调试或篡改的基础。

2024-06-30 15:06:36 379

原创 reduce函数高级用法

reduce()函数是 ECMAScript 6 (ES6) 中数组的一个迭代方法，它接收一个回调函数作为累加器（accumulator），对该数组的所有元素（从左到右）执行操作，最后将计算结果累积为单一输出值。：上一次回调函数的返回值，第一次调用回调函数时，如果指定的初始值 initialValue，那么该参数值就是 initialValue，否则就是数组元素的第一个。：数组中正在处理的元素。将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中；

2024-06-29 12:32:00 1016

原创 vue3 使用＜script setup＞中优雅地定义和使用全局状态管理

除了使用 Vuex 之外，我们还可以通过 Composition API 来定义和管理全局状态。这种方式更加轻量和灵活，适用于中小型项目。在这个部分，我将介绍如何使用reactive和组合函数来实现全局状态管理。首先，在src目录下创建一个store目录，并在其中创建一个文件，用于定义我们的全局状态。

2024-06-28 10:35:27 1049

原创 vue3一些高阶用法

通过这篇文章，够帮助你在开发中更加得心应手。

2024-06-28 10:25:41 1390

原创 vue3使用vue3-sfc-loader实现SFC在线编辑和预览功能

最近在做一个可视化项目，里面有一个拓展组件功能是可以在线写vue2或vue3代码然后实时可以查看组件的预览。

2024-06-25 15:02:07 636

原创前端实现灰度发布

如果进行AB测试，可以在测试平台设置实验组（使用新设计的用户）和对照组（使用旧设计的用户），并配置实验目标（如页面停留时间、转化率等），系统会自动根据用户标识分配组别，并收集相关数据。：在服务端（如Nginx、API Gateway、云服务商的负载均衡器等）配置规则，根据请求头中携带的灰度标识，将灰度用户的请求路由到灰度版前端资源或新版本后端接口。根据业务需求，决定选取活跃度较高的用户作为灰度用户，通过后端服务为这些用户的账户添加“灰度测试”标签，并将其同步到客户端（如浏览器Cookies）。

2024-06-24 18:19:58 546

原创 Vue 3 依赖注入: provide 和 inject API

总结来说，Vue 3的provide和injectAPI提供了一种强大且灵活的方式来处理复杂的组件通信问题。不过，记住任何工具都有其使用场景，无论何时应该深思熟虑并制定适合项目的最佳实践。

2024-06-23 18:22:57 723

原创 Vue 3 API 盲点

Composition API 是 Vue 3 中引入的一种新的代码组织方式。在深入了解 Vue 3 的 API 之前，我们先来回顾一下 Vue 3 的主要特性。在 Vue 3 中，组件可以返回多个根节点，这就是 Fragments 的概念。接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性。是 Vue 3 引入的一种新的组件，它可以将组件的内容渲染到 DOM 树中的指定位置。用来定义一个响应式的对象，它只能用来定义对象类型的值。选项用于声明组件中可以触发的事件。

2024-06-23 18:18:49 1059

lbking666666的专栏