欧菲小杨-CSDN博客

原创如何给token加密以及token的生成

将生成的密钥保存在服务器端，并使用该密钥对需要加密的 token 进行加密。如果使用的是对称加密算法，如 AES，则使用相同的密钥进行加密和解密。如果使用的是非对称加密算法，如 RSA，则使用公钥进行加密，使用私钥进行解密。需要注意的是，在实现过程中还要考虑到其他安全问题，例如 token 泄露、中间人攻击等，以确保加密后的 token 能够真正保护数据的安全。定期更换密钥以维持安全性，并确保采用足够复杂度的密钥，例如使用足够长的密码、随机数等。

2023-04-20 19:09:09 2910

原创 vue3中的ref和reactive有什么不同

可以用于创建任何JavaScript对象（包括数组和函数）。都是用来创建响应式数据的API。时，可以直接访问其值，就像访问普通变量一样，而不需要使用。只能用于创建单个基本类型值（例如数字、布尔值等），而。属性的简单包装器对象，访问或修改这个值需要使用。返回原始对象的代理，可以直接访问和修改其属性。但是，在JavaScript代码中使用。适用于处理复杂的JavaScript对象。对象上添加响应式属性，需要将其包装在。适用于处理单个基本类型值的情况，而。对象本身是不可响应的，如果要在。

2023-04-20 16:22:37 1534

原创 vue2与vue3中的watch和computed区别

而在Vue 3中，默认情况下，computed返回的值也会进行缓存，但是可以通过设置computed选项的“cache”属性为false来禁用缓存，或者使用新的“ref”和“reactive”API手动控制缓存行为。watch的写法差异：在Vue 2中，watch可以直接监听一个表达式或一个函数，并且提供了deep选项来深度监听对象内部属性的变化；总之，在Vue 3中，由于响应性核心实现的变化和新的API的引入，computed和watch的使用方式都有了一些微调，但它们的基本功能和作用并没有改变。

2023-04-20 15:50:35 619

原创 vue2与vue3的diff算法区别

Vue3还增加了一种新的优化方式——静态提升，它可以将静态节点在编译阶段提前处理，避免在运行时进行比较。总体来说，Vue3的diff算法相比Vue2更加高效，并且新增的静态提升优化方式可以进一步提升渲染性能。在计算key值不同时，Vue2会采用首尾两端比较的方法，而Vue3则采用了更高效的“Map”数据结构。在节点移动时，Vue2通过splice函数进行数组操作，而Vue3则采用了更轻量级的移动节点算法。Vue2使用双向指针来进行虚拟DOM的比较，而Vue3则使用了单向链表的方式。

2023-04-20 15:46:48 2646

原创 template与render区别

render 则是一种函数式的、JavaScript 代码的方式，可以直接操作 DOM 和数据，并返回渲染结果。使用 render 函数可以实现更灵活、更高效的组件渲染和控制，但其需要熟悉函数式编程和 Vue.js 的虚拟DOM等概念。template 是一种声明式的、HTML 结构化的语法，可以描述组件的结构和状态。使用 template 可以更好地理解和维护组件代码，但其本质上是一种编译时转换为 render 函数的语法糖。

2023-04-19 22:16:44 288

原创 SPA与SSR区别

SSR 则是一种在服务器端动态生成完整的HTML页面并将其发送到浏览器的应用程序架构。这意味着网站的首次访问需要从服务器加载完整的HTML页面，但后续的路由切换则可以在客户端进行，类似于SPA。SSR 的主要优点是可以提高SEO和首屏加载速度，并且对于一些需要频繁变动的内容可以减轻客户端渲染的压力。SPA 是一种在浏览器中加载单个HTML页面，并通过JavaScript动态更新页面内容的应用程序。总之，SPA 和 SSR 都有各自的优点和适用场景，开发者需要根据项目需求选择合适的架构方法。

2023-04-19 21:55:11 713

原创 vue中怎样扩展一个组件

Render Props 模式：通过 render 函数将一个函数作为子组件传递给另一个组件，在函数内部处理逻辑并返回需要渲染的内容。插槽：使用插槽（slot）功能，将组件中某些固定部分替换为可自定义内容，在不改变原有组件逻辑的基础上完成扩展。继承：使用 extends 属性继承已存在的组件，并在新组件中添加或修改属性、方法或生命周期函数等。混入：使用 mixins 属性将多个混入对象合并到一个组件中，从而实现组件的扩展。总之，扩展组件的方式可以根据具体业务需求进行选择，以便更好地满足项目开发的要求。

2023-04-19 21:52:28 667

原创 vue中怎样实现权限管理以及关于v-permission

v-permission 是一个 Vue.js 的指令，可以用于在页面上控制特定操作或组件的显示和隐藏。该指令需要传入一个权限值，当用户具有该权限时，对应的操作或组件才会被渲染到页面上。否则，这些元素将被隐藏或移除。路由守卫是一种机制，用于在切换路由时执行某些操作，如检查用户是否有特定权限或登录状态是否有效。可以使用全局前置守卫（beforeEach）或路由独享的守卫（beforeEnter）来实现权限控制。在前置守卫中，可以根据用户角色或其他条件判断是否允许进入特定的路由或页面。

2023-04-19 21:47:22 1273

原创服务端返回的路由信息如何添加到路由表或者路由器中

如果使用的是 Vue Router，需要在 addRoutes 完成后手动调用 router.addRoutes(routes) 来更新路由表。总之，将服务端返回的路由信息添加到路由表或者路由器中是一个比较通用的场景，在具体实现时需要根据自己的业务需求进行定制化开发。在客户端代码中，使用路由器的 addRoutes 方法将新解析出来的路由表添加到已有的路由表中。当用户访问新增加的路由时，Vue Router 会按照路由表中的配置进行路由匹配和跳转。

2023-04-19 21:43:22 305

原创 web soket与ajax的区别

WebSocket是一种双向通信协议，使用HTTP协议进行握手后，在建立的TCP连接上进行数据传输。相对于Ajax轮询方式不停地向服务器发送请求，WebSocket连接只需要建立一次，可以通过向服务器发送消息来实现实时通信，同时也可以接收服务器主动推送的消息。Ajax单向通信，客户端只能通过向服务器发送请求来获取数据，不能像WebSocket一样主动向服务器发送消息。WebSocket与Ajax都是用于在Web浏览器和服务器之间进行实时通信的技术，但它们在工作原理和使用场景上有所不同。

2023-04-19 21:38:35 139

原创从v-model到render的原理

在使用 v-model 指令时，Vue.js 会自动为组件生成一个value属性和一个input事件监听器，同时将输入框中的值与组件实例的属性进行双向绑定。反过来，如果程序修改了组件实例的属性，输入框中的值也会随着更新。这种方式灵活性非常高，但是对于复杂的 UI 组件开发，需要编写大量的代码。render 是一种更底层的数据渲染方式，能够提供更加灵活的控制，但需要手动编写大量的代码，对于开发效率较低。v-model 是一种基于模板的数据绑定方式，能够快速地创建双向数据绑定，但是对于复杂的组件开发并不适用。

2023-04-19 21:24:29 297

原创 ECharts大屏失帧如何解决

浏览器兼容性问题：不同浏览器可能对 CSS 和 HTML 标准有不同的解释，这可能导致图表失真。解决方法是检查浏览器兼容性，并使用相应的解决方案。图表配置错误：ECharts 提供了很多配置项，如果配置错误可能导致图表失真。解决方法是仔细检查配置项并确保它们正确地设置了。元素缩放：如果元素被放大或缩小了，可能会导致图表失真。分辨率不匹配：大屏分辨率与实际分辨率不匹配，导致图表显示失真。图表数据异常：如果数据异常可能导致图表失真。总之，要解决 ECharts 大屏失真问题，需要仔细检查以上因素，并逐一解决。

2023-04-19 21:17:23 664

原创 vue中使用async和await要求让整个项目暂停5秒怎么实现

3.注意，这种做法会阻塞整个应用程序的执行，因此不建议在实际生产环境中使用。如果您需要在应用程序中等待长时间的操作完成，最好使用异步代码和回调函数，以便其他部分的应用程序可以继续运行。2.在需要暂停执行的地方调用该函数。1.创建一个异步函数来模拟需要等待 5 秒的操作，并在其中使用。例如，可以创建一个名为。

2023-04-19 21:11:07 1597

原创 VueX、Pinia和MobX区别，以及其中VueX3与VueX4的区别

在VueX和Pinia中，状态存储在store对象中，可以通过mutations（同步）和actions（异步）来更新。在MobX中，状态存储在observable对象中，可以通过actions和reactions（自动响应状态变化）来更新。VueX是专为Vue.js设计的状态管理库，而Pinia是在Vue.js中使用的新型状态管理库，它旨在提供更好的类型安全和更好的开发人员体验。总的来说，Vuex 4相比于Vuex 3提供了更多功能和性能上的改进，并且更适配Vue 3的特性。

2023-04-19 21:04:14 594

原创 vue3中怎样取消掉.el-main中的flex-basis: auto；

在这个CSS代码片段中，我们可以使用unset关键字来取消.el-main元素的flex-basis属性，并使用!important来确保这个样式优先级最高。这样做可以确保.el-main元素不再具有flex-basis: auto的属性。如果您想在Vue3中取消.el-main的flex-basis: auto，您可以使用CSS样式覆盖该属性。

2023-04-04 15:00:57 360

原创 ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until ...

是 React DOM 中的一个实验性功能，不建议在生产环境中使用。如果要使用 React DOM 的其他功能，请参阅官方文档以了解更多信息。是 React DOM 的一部分。，需要先安装 React 和 ReactDOM 包，因为。根据它给的提示：使用createRoot进行替代，安装完成后，即可通过以下命令安装。最后，控制台就不会抛出这个警告了。

2023-03-26 18:32:12 120 1

原创解决eject修复问题

命令会将隐藏的配置文件暴露出来，让你可以对项目进行更深入的定制和控制。命令，你将失去 Create React App 提供的所有自动化配置和脚本。命令是一个不可逆的操作，因此在使用之前请确保你真的需要更深入的控制和定制。命令的情况下对 Create React App 进行更深入的配置。命令来回滚到上一个可用的版本，以恢复项目的初始状态。命令导致了一些问题，你可以尝试使用其他的工具，例如。如果你使用 Git 进行版本控制，可以尝试使用。文件，确保所有的插件和配置都正确地加载和设置。命令重新安装依赖项。

2023-03-26 15:13:22 320

qq_53818683的博客