- 博客(132)
- 收藏
- 关注
RSS订阅原创 js垃圾回收机制
老生代的对象为存活时间较长或常驻内存的对象，即经历过新生代垃圾回收后还存活下来的对象，容量通常比较大。JavaScript的垃圾回收机制是一种自动管理内存的机制，它负责在代码执行过程中自动释放不再使用的内存空间，以避免内存泄漏和资源浪费。对于未被标记的对象（即不可达对象），垃圾回收器会将其视为垃圾并进行清除操作，释放其占用的内存空间。除了上述两种基本的垃圾回收方法外，现代JavaScript引擎还实现了更复杂的垃圾回收策略，以优化回收过程并减少对程序执行的影响。这些被标记的对象在后续阶段中不会被回收。
2024-12-22 14:41:01
384
原创 vue父子组件传参的方法
使用.sync修饰符：在Vue 2.x中，.sync修饰符提供了一种简化的方式来更新父组件中的值，但在Vue 3.x中已被移除。Vue提供了几种方法来实现这一点，主要包括使用props传递数据给子组件，以及使用事件（如自定义事件）从子组件向父组件发送数据。5.props是单向的：父组件传递给子组件的props是单向的，子组件不应该直接修改props的值。事件名不应包含大写字母：Vue的事件名是不区分大小写的，但习惯上建议使用小写字母或短横线分隔的命名方式，以避免与HTML原生事件名冲突。
2024-12-21 17:39:59
373
3
原创 vuex怎么防止数据刷新丢失？
常用的Vuex持久化插件如vuex-persistedstate，它可以将Vuex的状态持久化到localStorage或sessionStorage中。在页面刷新前保存状态：通过监听beforeunload事件，在页面即将刷新之前将Vuex中的状态数据保存到本地存储中。如果不想使用持久化插件，也可以手动将Vuex的状态保存到本地存储中，并在页面加载时从本地存储中恢复状态。当使用服务端存储时，除了网络延迟和服务器负载外，还需要确保数据的完整性和一致性，以及服务端的安全性。1. 使用持久化插件。
2024-12-21 17:32:15
339
1
原创 React与Vue的区别（相同点和不同点）
JavaScript是世界上最流行的语言之一，React和Vue是JS最流行的两个框架。但各有优缺点，本文将详细对比两大框架一、框架背景ReactReact是由Facebook开发的用于构建用户界面的JavaScript库，Facebook对市场上JavaScript MVC框架都不太满意，Facebook就自己写了一套用于架设Instagram，React由此诞生。VueVue是一个用于为Web构建的UI的渐进式框架。
2024-12-21 16:12:04
1330
原创 foreach、for in 和for of的区别
在JavaScript中，forEachfor...in和for...of都是用来遍历集合（如数组、对象等）的循环结构，但它们的用法和适用场景有所不同。以下是它们的主要区别和使用场景：1. forEach用途：forEach 是一个数组方法，用来遍历数组中的每个元素。它对每个元素执行一个回调函数。element：当前正在处理的数组元素。index：当前元素的索引（可选）。array：原始数组本身（可选）。特点：只能用于数组（或类数组对象）。
2024-12-21 08:27:43
573
原创 写项目时的常用命名
以下是常见的命名规则和一些常用的命名建议，适用于不同场景，如变量、函数、类、文件、组件等。函数命名：与 API 请求相关的函数命名通常使用 fetch 或 get、post 等动词开头，清楚表达请求意图。使用小驼峰命名法（camelCase）：变量和函数名通常使用小驼峰命名法，首字母小写，后续单词的首字母大写。文件和目录：使用清晰、简洁且具有描述性的命名，前端文件使用小写和连字符（kebab-case）。使用大驼峰命名法（PascalCase）：类名通常使用大驼峰命名法，即每个单词的首字母大写。
2024-12-21 08:18:29
621
原创 vue如何创建项目？
至此，你已经成功从零开始创建了一个Vue项目，并可以开始开发自己的Vue应用了。如果需要更多定制化的配置，可以在创建项目时选择手动配置，并根据需求进行配置。在浏览器中访问 http://localhost:8080/（默认端口可能会有所不同），即可看到Vue项目的默认页面。在创建过程中，Vue CLI 会询问你关于项目配置的一些选项，例如选择手动配置或使用预设配置等。下载安装Node.js： 在Node.js官网下载适合你操作系统的Node.js安装包，并按照提示进行安装。步骤三：创建新的Vue项目。
2024-12-13 09:56:08
202
原创 vue路由的钩子函数?
beforeEach(to, from, next)：在路由切换开始时被调用，可以用来进行全局的导航守卫，如权限验证等。调用 next() 继续导航，调用 next(false) 中止导航，调用 next('/path') 跳转到新的路径。常用的路由钩子函数包括全局前置守卫、全局解析守卫、全局后置钩子以及路由独享守卫。beforeResolve(to, from, next)：在导航被确认之前和所有组件内守卫和异步路由组件被解析之后调用。，通过合理使用这些钩子函数可以实现更灵活的路由控制和管理。
2024-12-13 09:54:36
686
原创 Vue vs. React：两大前端框架的深度对比与分析（二）
在Vue中，每个组件都有对应的虚拟DOM树，当数据发生变化时，Vue会通过对比新旧虚拟DOM树的差异，然后只更新变化的部分到实际的DOM上。Vue使用了类似于观察者模式的机制，通过劫持数据的getter和setter，以及依赖追踪的方式，实现了数据的变化检测和视图的更新。总结起来，Vue和React都采用了虚拟DOM和组件化开发的设计思想，通过提供响应式的数据绑定、高效的DOM更新和组件化的开发模式，使得构建用户界面变得更加简单、高效和易于维护。每个组件都是独立的、可复用的，并且具有自己的状态和生命周期。
2024-12-12 17:05:43
271
原创 Vue vs. React：两大前端框架的深度对比与分析（一)
本文将深入剖析Vue和React的原理、生态系统、API与语法、性能与优化以及开发体验与工程化等方面的差异，旨在帮助读者更好地了解这两个框架，为选择合适的技术栈提供参考。通过将页面的变化先映射到虚拟DOM上，然后进行对比更新，最后才将变化应用到实际的DOM上，减少了昂贵的DOM操作。强大的生态系统：React拥有强大且活跃的社区支持，有大量的开源组件和工具可供选择，同时也有丰富的插件和解决方案。组件化开发：React将UI拆分成独立的组件，每个组件具有自己的状态和生命周期，可以实现高度可复用的代码。
2024-12-12 17:04:38
594
1
原创 在react中使用组件的标签页写订单管理页面
遍历标签配置数组：使用map函数遍历这个数组，为每个元素创建一个Tabs.TabPane组件。Tabs组件的工作机制：Tabs组件内部会根据active属性或用户点击事件来显示或隐藏不同的Tabs.TabPane组件。标签点击事件：为每个Tabs.TabPane组件的onChange属性绑定一个函数，该函数在标签被点击时调用，并传入当前遍历到的标签配置对象。首先呢我需要一个来渲染标签标题的一个数组。标签配置数组：首先，通过定义一个数组，其中每个元素都是一个对象，包含title和id属性，来定义不同的标签。
2024-12-11 16:01:51
517
原创 vue使用百度富文本编辑器
add vue-ueditor-wrap 或者 pnpm add vue-ueditor-wrap 进行安装。在 serverurl:"/pc/common/ueditor"，//服务端接口 修改为自己的接口即可使用。3、把下载好的包放在项目目录下 /public下。因为官方的我没用来，所以我自己找的另外的包。6、上传图片报错，说什么未配置。5、v-model 数据绑定。2、下载UEditor。4、main.js配置。
2024-12-10 10:19:12
914
原创 ES6新增特性使用
/ 输出: [1, 2, 3, 4, 5, 6]// 创建一个新的数组，内容与 arr 相同。// 在原数组前后插入元素。// 输出: [0, 1, 2, 3, 4]// 输出: Hello, Alice!// 按顺序将数组元素赋值给变量。// 输出: [1, 2, 3]
2024-12-09 09:48:54
213
原创 模块化是什么，组件化是什么，两者的区别是什么
**定义**：组件化是指将用户界面或功能单元拆分为相互独立、可复用的组件，每个组件都有自己的业务逻辑和展示效果。- **定义**：模块化是指将一个大型系统拆分为相互独立、功能相关的小模块，以便于开发、维护和复用。每个模块都有清晰的接口和功能边界，可以独立开发、测试和部署。1. **抽象层级不同**：模块化更多地关注于代码层面的组织和复用，而组件化更多地关注于用户界面或功能模块的组织和复用。2. **复用粒度不同**：模块化的复用单位更偏向于代码级别的功能模块，而组件化的复用单位更偏向于界面或功能单元。
2024-12-08 18:04:51
145
原创 vue中如何点击事件，获取该点击元素
在上面的示例中，我们在`<div>`元素上添加了一个点击事件处理程序`@click="handleClick"`，当这个`<div>`元素被点击时，`handleClick`方法会被调用，并且传入一个事件对象`event`。通过`event.target`可以获取到被点击的元素。在Vue中，你可以通过事件处理程序（event handler）来监听点击事件，并通过事件对象（event object）获取点击的元素。
2024-12-08 18:04:14
289
原创 【无标题】
删除例如App.css、App.test.js、index.css、logo.svg、reportWebvitals.js、setupTests.js等文件，1.创建一个文件夹，shift+鼠标右键选择在此处打开powershell。2.安装路由 npm install react-router-dom。超全面详细一条龙教程！2.为了加速npm下载速度，先把npm设置为淘宝镜像地址。3.执行下面的npm安装react，那么基础的项目就搭建好了。保留核心index.js、App.js；
2024-12-08 18:02:53
534
原创 jsx的语法规则
避免在JSX中直接使用JavaScript语句：如前所述，JSX中只能嵌入表达式，不能嵌入语句。如果需要执行复杂的逻辑，可以在渲染JSX之前先计算好需要渲染的内容。表达式插值：在JSX中，可以将JavaScript表达式放在大括号 {} 中，以在渲染时插入动态内容。列表渲染：可以使用JavaScript数组的map()方法来遍历数组，并为每个元素生成对应的JSX元素，从而实现列表渲染。类名：在JSX中，由于class是JavaScript的保留字，因此为元素添加类名时需要使用className属性。
2024-12-08 17:56:47
339
原创 什么是JSX
它允许你在JavaScript代码中编写类似HTML的标记。虽然JSX看起来很像HTML，但它实际上是JavaScript的一个语法扩展，在编译时会转换成React.createElement()的调用，从而创建React元素。在构建过程中，你需要使用Babel这样的JavaScript编译器将JSX转换成标准的JavaScript代码。相反，你可以使用内联样式（以JavaScript对象的形式）或CSS类（通过className属性，注意不是class，因为class是JavaScript的保留字）。
2024-12-08 17:55:42
211
原创 React有什么特点？
React在内存中维护一个快速的轻量级JavaScript对象表示DOM，在每次状态更新时，React会比较新旧虚拟DOM的差异，并只将必要的更新应用到真实的DOM上，这大大减少了DOM操作的数量，提高了应用的性能。组件之间可以嵌套使用，形成完整的UI结构。综上所述，React以其声明式、组件化、高效性、灵活性、丰富的生态系统以及跨平台等特点，在前端开发中占据了重要的地位，并受到越来越多开发者的青睐。通过构建管理自身状态的封装组件，并对其组合以构成复杂的UI，React提高了代码的可重用性和可维护性。
2024-12-08 17:55:03
360
原创 vuex/redux的异同？
Redux的reducer是一个纯函数，它接收旧的状态和一个action，并返回新的状态。状态更新方式：Vuex和Redux都通过定义特定的操作（如mutations/actions）来描述状态的更改，并通过纯函数（reducer/mutations）来处理这些操作并更新状态。Redux：虽然Redux本身相对简单且通用，但通过与各种中间件和插件的结合使用，也可以实现复杂的异步操作和状态管理。不可变状态：两者都鼓励使用不可变的数据结构来管理状态，即不直接修改原有状态，而是通过创建新的状态对象来更新状态。
2024-12-08 17:54:24
275
原创 单页面应用和多页面应用区别及优缺点
1.单页面应用：只有一个HTML页面，通过JavaScript动态更新页面内容，实现页面的“跳转”实际上是局部资源的刷新，而非整页刷新。综上所述，单页面应用和多页面应用各有其优缺点，选择哪种应用方式需要根据项目的具体需求、开发团队的实际情况以及目标用户的使用习惯等因素进行综合考虑。2.多页面应用：由多个独立的页面组成，每个页面都需要加载完整的HTML、CSS和JS等资源。页面跳转时，整个页面会重新加载。1.单页面应用：由于不需要重新加载整个页面，减少了白屏现象和页面切换时的等待时间，提高了用户体验。
2024-11-10 17:57:09
394
原创 什么是组件及vue3常用框架组件。
同时，开发人员也可以利用已经存在的组件，避免重复造轮子，提高开发效率。Vant 是一个基于 Vue 3 的轻量、可靠的移动端组件库，提供了丰富的常用组件和工具，如轮播、下拉刷新、弹框、表单等等。Mint UI 是又拍云团队开发的一个适用于移动端的 Vue 3 组件库，包含了诸如按钮、导航、画廊、Toast 等常见组件，同时也提供了 SCSS 变量供定制主题。Element Plus 是由饿了么前端团队开发的一套基于 Vue 3 的 UI组件库，提供了一系列美观、易用的组件，如按钮、表单、弹窗、菜单等等。
2024-11-10 17:55:29
318
原创 Vue中双向数据绑定是如何实现的？
Vue中的双向数据绑定是通过一种称为“响应式系统”的机制实现的，它允许数据对象与DOM保持同步。这种机制的核心在于Vue如何观察数据的变化，并在数据变化时更新DOM，以及在DOM变化时更新数据。同时，如果绑定的数据发生变化，表单元素也会相应更新。父组件通过props传递数据给子组件，子组件在修改数据时，通过自定义事件将修改后的数据传递给父组件。.sync是Vue提供的修饰符，用于实现父子组件之间的双向数据绑定。通过这种方式，Vue实现了数据的双向绑定，使得开发者可以更加方便地构建响应式的Web应用。
2024-11-10 17:54:53
227
原创 Vue的生命周期函数有哪些?
Vue的生命周期函数是指Vue实例从创建到销毁的过程中，会调用的一系列特殊函数，这些函数允许开发者在Vue的不同阶段执行特定的代码。在Vue 3中，由于引入了Composition API，一些传统的Options API中的生命周期函数被替换成了新的命名方式（如beforeMount变为onBeforeMount），但Options API仍然被支持。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也都会被销毁。然而，挂载阶段还没开始，$el 属性目前不可见。
2024-11-10 17:54:20
375
原创 vue中的常用指令及简写！！！
12.v-cloak：这个指令将在 Vue 实例结束编译时从绑定的 HTML 元素上移除。11.v-pre：跳过这个元素和它的子元素的编译过程。v-bind：用于动态地绑定一个或多个属性，或者一个组件的 prop 到表达式。5.v-else：与 v-if 结合使用，当 v-if 的条件为假时渲染元素。6.v-show：根据表达式的真假值切换元素的 display CSS 属性。8.v-text：更新元素的 textContent。4.v-if：根据表达式的真假条件渲染元素。
2024-11-10 17:52:20
315
原创 vue发展史
在这个过程中，他发现现有的前端框架（如Angular和React）在某些方面存在不足，于是开始思考如何设计一个更简洁、高效且易于使用的前端框架。这个版本的Vue.js主要关注视图层，并提供了一些基本的功能，如数据绑定、条件渲染和列表渲染等。尽管功能相对有限，但Vue.js的简洁性和易用性吸引了大量开发者的关注。在未来，随着技术的不断进步和社区的发展，Vue.js将继续为开发者带来更多惊喜和便利。随着Vue.js的普及，其生态系统逐渐壮大。许多优秀的库和工具与Vue.js一起使用，共同构建更复杂的前端应用。
2024-11-08 21:10:12
467
原创 vue简介
在学习过程中，建议结合官方文档和实际项目进行练习，以更好地掌握Vue.js的知识点。Vue.js是一个渐进式JavaScript框架，用于构建用户界面。Vuex的核心概念（state、getters、mutations、actions）路由的基本概念（路由、路径、参数等）如何安装和使用Vue Router。5. Vue.js状态管理。6. Vue.js高级技巧。1. Vue.js简介。2. Vue.js基础。3. Vue.js组件。4. Vue.js路由。Vue.js是什么？如何安装Vue.js。
2024-11-08 21:09:24
292
原创 关于es6
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值；模板字符串（template string）是增强版的字符串，用反引号（`）标识。⚫ ES6 加入许多新的语法特性，编程实现更简单、高效；⚫ ES6 的版本变动内容最多，具有里程碑意义；总结：用const声明对象，let代替var使用。⚫ ES6 是前端发展趋势，就业必备技能；当遇到字符串与变量拼接的情况使用模板字符串。2. 块儿级作用域（局部变量）；
2024-10-20 20:04:26
318
原创 箭头函数语法及书写规则
ES6 允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用 于匿名函数的定义；1. 箭头函数的 this 是静态的，始终指向函数声明时所在作用域下的 this 的值；2. 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果；3. 箭头函数 this 指向声明时所在作用域下 this 的值；1. 如果形参只有一个，则小括号可以省略；3. 不能使用 arguments 变量；4. 箭头函数不能作为构造函数实例化；2. 不能作为构造实例化对象；
2024-10-20 19:59:29
236
原创 点击置顶按钮，返回到顶部
使用了点击事件，使用jQuery获取图片（这里我的置顶图片为toTop）添加点击事件为con_top，点击获取需要置顶的框为（ document.getElementsByClassName("box_item")[0]），向上滚动至顶部。top: 0滚动到top为0。behavior: 'smooth'平滑的滚动。换成你自己整个内容区的id或者class。// 点击按钮，返回顶部。
2024-10-12 21:20:35
224
原创 JavaScript全屏，监听页面是否全屏
在JavaScript中，直接监听浏览器是否进入全屏模式并不直接支持，因为全屏API主要是关于请求和退出全屏模式的，而没有直接的监听器可以告知页面何时进入或退出全屏模式。但是，你可以通过在你的代码中跟踪全屏状态的改变来模拟这个功能。
2024-10-11 21:55:00
217
原创 JavaScript 地址信息与页面跳转
在JavaScript中，处理地址信息和页面跳转通常涉及到两种主要的技术：使用window.location对象和创建超链接（<a>标签）。window.location.protocol：返回URL的协议部分（如 "http:" 或 "https:"）。window.location.hash：返回URL中#符号后面的部分（通常用于页面内的导航）。使用 window.location.href 进行页面跳转是最常见和直接的方法。window.location.href：返回完整的URL。
2024-10-11 21:53:54
185
原创 datalist 是什么？以及作用是什么？
用户可以在输入时从这些选项中选择，但也可以输入不在列表中的其他值。<input list="browsers" name="browser" id="browser">：这里的 list 属性关联了 datalist 元素的 id，即 browsers。datalist 元素的主要作用是提供一个友好的用户界面，帮助用户快速地从预定义的选项中选择值，而不需要手动输入。<datalist id="browsers">：datalist 元素的 id 属性值必须与 input 元素的 list 属性值相匹配。
2024-10-11 21:52:48
342
原创 在JavaScript中如何获取时间戳？
方法，这会返回自1970年1月1日00:00:00 UTC（方法，这个方法会直接返回当前时间的毫秒级时间戳，无需先创建。函数用于向下取整，确保得到的是整数秒的时间戳。在JavaScript中，你可以通过几种方式。，你可以简单地将毫秒级的。如果你需要的是秒级的。
2024-10-11 21:51:19
328
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人