- 博客(48)
- 收藏
- 关注
RSS订阅原创 Vue 3 Hooks: 深入理解 Composition API 的魅力
Vue 3 引入了革命性的 Composition API，它提供了一系列的 Hooks（也称为Composition Functions），让组件的逻辑组织更加清晰、复用性更强。本文将深入探讨Vue 3的Hooks使用，从基础概念到实践应用，带你领略这一新特性的魅力。Vue 3 在保留了Vue 2的易用性和灵活性的同时，通过引入Composition API，实现了逻辑的模块化和组件功能的高效复用。
2024-05-02 19:54:51
548
1
原创 探索Vue 3 reactive()原理及其实现步骤
通过上述步骤，我们大致了解了Vue 3中reactive()函数的工作原理及其简化实现。实际Vue框架中的响应式系统远比上述示例复杂，它还包括了对数组的特殊处理、深层嵌套对象的响应式转换、以及性能优化等多个方面。然而，掌握这些基本原理，对于深入理解Vue的响应式机制至关重要，也是进一步探索Vue框架内部运作的良好起点。
2024-04-28 15:32:50
770
1
原创 Vue 3 生命周期全面解析：探索Composition API的奥秘
Vue 3通过引入Composition API，为生命周期管理开辟了新的可能性，使得组件逻辑更加模块化、可复用。掌握这些新特性，开发者能够构建出结构更清晰、维护成本更低的Vue应用。随着Vue生态系统的不断成熟，深入了解并熟练运用Vue 3的生命周期管理，将成为每位Vue开发者的重要技能之一。本文旨在为读者提供一个Vue 3生命周期及其与Composition API结合使用的全面概览，希望能为你的Vue开发之旅带来启发和帮助。
2024-04-28 15:08:12
543
原创 Vue3深度解析：掌握define系列API，构建高效组件体系
是Vue3中用来定义一个标准组件的主要方式，它接受一个选项对象作为参数，这个对象可以包含组件的模板、数据、方法、生命周期钩子等属性。通过这些“define”系列API，Vue3为开发者提供了一套强大的工具集，不仅提升了开发效率，也确保了应用的高质量和高性能。：这些API显著提升了Vue应用的类型安全，帮助开发者在编码阶段捕捉错误，减少运行时问题。：通过明确分离组件的定义和逻辑，使代码结构更加清晰，易于阅读和维护。函数中明确声明组件的事件和属性，提高了代码的可维护性和类型安全性。
2024-04-27 22:51:32
495
1
原创 Vue3中的ref与reactive：构建响应式数据的双刃剑
的深度响应意味着修改对象的任何属性都可能导致依赖它的组件重新渲染，因此，在处理大量数据或频繁更新的场景下，要特别注意性能影响。：直接通过属性访问，更加直观，但在处理深层嵌套对象时，务必注意不要直接修改嵌套对象的引用，以免破坏响应性。适合管理组件内部或全局状态管理库（如Pinia）中的复杂对象，因为它能更好地处理对象属性的响应式更新。的使用技巧，以及如何在实际开发中做出合适的选择，从而构建出高效、可维护的Vue应用程序。在更新时，只会影响自身，不会触发依赖于它的其他数据的更新，适用于低耦合的状态。
2024-04-27 22:04:27
590
1
原创 vue3的基本特性和底层原理
Vue3的核心创新之一是摒弃了Vue2基于Object.defineProperty的响应式系统，转而采用ES6的Proxy来实现数据代理。Proxy可以直接代理整个对象，无需递归遍历其属性，提供了一种更高效、更全面的数据拦截机制。当对代理对象进行读取、设置、删除、枚举等操作时，Proxy可以透明地触发相应的处理器函数（handler）。在Vue3中，响应式对象通过reactive()函数创建，该函数返回一个由Proxy包装的目标对象。
2024-04-26 11:00:16
1481
2
原创 Vue2与Vue3：深度剖析核心差异与升级亮点
随着Vue.js框架的不断演进，Vue2与Vue3作为两个重要版本，各自承载了特定时期的前端开发理念和技术实践。本文将全面探讨Vue2与Vue3之间的核心区别，旨在帮助开发者理解两者在设计思路、性能优化、API结构、生命周期管理等方面的显著差异，以便更好地选择和迁移至适合项目的框架版本。
2024-04-26 10:51:14
948
原创 《编码人生：程序员之路的收获、感悟与未来展望》
成为程序员，是一场与知识、技术、自我对话的旅程。我收获了知识的丰富、技能的提升、思维的锻炼，也对未来的职业道路有了明确的规划与期待。程序员之路，既充满挑战，又孕育机遇，我愿怀揣初心，砥砺前行，用代码编织梦想，用技术点亮未来。
2024-04-24 11:17:54
291
原创 《“差异“也疯狂：一场妙趣横生的Diff算法冒险记》
在一个阳光明媚的午后，代码世界里的两位主角——“老练”的Oldie和“活泼”的Newbie，突然收到了一封神秘的挑战书。下一次，当你面对两份文本，想要找出它们之间的差异时，不妨想象一下这场冒险中的Oldie与Newbie，或许你会更加深刻地理解并欣赏那些默默守护我们代码世界的Diff算法英雄们。旁白深情讲述：“Myers杖，源自传奇的O(ND) Difference Algorithm，只需一次遍历，就能精准定位差异，省时省力，高效无比！然而，随着文本长度的增长，Oldie的步伐愈发沉重。
2024-04-24 10:59:42
377
原创 Vue.js应用中的多元化通信策略：10+种方法深度解析
Vue 2.x 允许开发者创建自定义指令，扩展HTML元素的行为。自定义指令通过定义bindinsertedupdateunbind等钩子函数，可以在DOM元素生命周期的特定阶段执行操作。实现特定的DOM操作、添加自定义行为（如拖拽、滚动监听、第三方库集成等），或者封装通用逻辑以提高代码复用性。el.focus();
2024-04-23 20:38:30
1550
原创 探索Vue.js状态管理的艺术：深入理解与实践Vuex
1.什么是VuexVuex是一个专门为Vue.js应用程序设计的状态管理库。它提供了一个中心化的存储系统（通常称为“store”），用于集中管理应用中所有组件共享的状态。这个“store”不仅是数据仓库，还定义了改变状态的严格规则，确保状态变化的透明性和可追踪性。2.Vuex的核心价值单一可信源（Single Source of Truth）：所有组件都从同一个store获取状态，消除了组件间状态不一致的问题。状态变更的可预测性：通过actions触发异步操作，mutations。
2024-04-23 10:55:21
1257
2
原创 利用Vue 2路由传递Props：提升组件间数据交互的灵活性与效率
在构建基于Vue 2的单页应用程序（SPA）时，Vue Router扮演着至关重要的角色，它负责管理应用的路由导航和页面间的切换。通过Props，我们可以保持组件的封装性和复用性，遵循单一职责原则，让每个组件专注于处理自己的数据和逻辑。而在Vue Router的上下文中，我们可以通过路由配置文件为特定路由所对应的组件设定Props，这些Props会在用户导航到该路由时自动注入到目标组件。这意味着，即使没有明确的父子组件关系，也能借助路由系统实现数据的传递，进一步扩展了Props的应用场景。
2024-04-22 10:53:19
928
2
原创 自定义Vue 2双向绑定指令：实现与解析
v-my-modelVue.directive('my-model', { // ... 钩子函数定义 ... });使用方法注册一个名为my-model的全局指令。该指令包含一系列钩子函数，用于在不同阶段执行特定任务。本文详细解析了一段实现Vue 2自定义双向绑定指令v-my-model的代码。该指令通过bind和update钩子实现数据模型与输入元素值的双向同步。在实际项目中，这样的自定义指令有助于应对特定场景下的数据绑定需求，增强代码的可复用性和灵活性。
2024-04-19 11:44:24
685
原创 深入理解与运用Vue 2中的插槽（Slots）
Vue 2的插槽机制为组件设计带来了极大的灵活性，无论是默认插槽、具名插槽还是作用域插槽，都旨在提升组件的复用性和定制化程度。理解并熟练运用这些插槽类型，可以帮助开发者构建出更强大、更易于维护的组件体系，提升整个项目的开发效率和用户体验。在实践中，应根据具体业务需求选择合适的插槽类型，实现组件与父级模板之间的高效协作。
2024-04-19 11:30:35
1038
原创 v-model原理(简易源码版)
最近对v-model的源码分析一会,现在分享一下自己的见解,由于对源码可能不太熟悉,可能分析的太片面了,如果有大佬看见了也可以补充,我会及时的修改。
2024-04-18 14:57:52
587
原创 什么是 MVVM、mvc 模型
MVC: MVC 即 model-view-controller（模型-视图-控制器)是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处是：保证了模块的智能单一性，方便程序的开发、维护、耦合度低。
2024-04-14 21:57:06
455
原创 vue-router(进阶版)
之前的路由写法虽然可以使用但是会导致main.js过于臃肿,所以后续基本不会再这么使用了,声明式导航是指在 Vue 组件的模板（template）中，通过使用 组件来创建导航链接。这些链接与普通的 HTML a 标签类似，但它们是专门设计用于与 Vue Router 集成，能够自动处理基于路由的导航。编程式导航是指在 Vue 组件的 JavaScript 部分（通常是 methods 或其他事件处理器中）通过调用 this.$router 对象上的方法来直接控制路由的切换。
2024-04-08 14:39:17
1126
原创 vue-router(路由守卫)
，通过合理运用全局守卫、路由独享守卫和组件内守卫，可以实现对Vue应用路由访问的精细化控制，确保用户只能在满足特定条件（如身份验证、权限检查等）的情况下访问相应的页面。
2024-04-08 14:38:54
368
原创 hash模式和history模式的区别
综上所述，Hash模式简单易用、兼容性好，适用于不需要深度 SEO 优化且服务器端无需特殊配置的项目。而History模式提供了更标准、更美观的 URL 结构，有利于 SEO，但需要服务器端适当配置以支持客户端路由，并且依赖现代浏览器的 History API 支持。根据项目的具体需求和技术环境，开发者可以选择合适的路由模式。
2024-04-07 11:42:56
862
原创 速成axios
大家好,又到了我们学习新东西的时候了,今天我们来了解一下现在市场上最主流的的插件咯了解一个插件的第一步肯定是去它的官网逛逛咯从它的主页就可以看出是基于promise异步,适用于浏览器和node.js。
2024-04-06 00:04:39
681
原创 vue-Router(初级篇)
1.什么是路由路由是根据不同的url2.什么是前端路由2.什么是前端路由特点：不向后台发送请求，不刷新页面，前后端分离3.什么是后端路由特点：向服务器发送请求，会刷新页面，前后端不能分离。
2024-04-06 00:02:50
561
原创 git的安装(链接远程仓库)
1.为什么要用git小可爱们大家好,现在也是到了多人开发的一个环节了,也是用上git这个宝贝工具了,进入到官网可以直接看到下载的地方了,但是考虑到众多同学也是大部分在国内,下载太慢,就直接提供国内的镜像网站了,话不多说,上链接当我们下载之后也是到了安装环节了看到上面那个安装流程之后,我的建议是一直Next下去,直到安装完成,这样安装基本满足了各位同学的日常使用了,除非公司有特殊要求除外,我也就简单在这说一下。
2024-03-31 23:29:37
563
原创 nodejs中间件
格式：错误级别中间件的 function 处理函数中，必须有 4 个形参，形参顺序从前到后，分别是 (err, req, res, next)通过 app.use() 、 app.get() 、 app.post() ，绑定到 app 实例上的中间件。客户端发起的任何请求，到达服务器之后都会触发的中间件，叫做全局生效中间件。通过调用 app.use(中间件函数)，即可定义一个全局生效的中间件。res.send(`发生了错误！不使用 app.use() 定义的中间件，叫做局部生效的中间件。
2023-12-24 23:48:49
1149
原创 nodejs搭建服务
在前端开发过程中，可能某些时候需要自己搭建一台服务器用于一些文件图片请求或者进行后端相关知识的学习。本文主要讲解如何通过nodejs进行一个基础服务器的搭建，包括如何将文件布置的服务器，以及基础接口的开发。例如：项目的开发依赖包、项目的相关命令等）。通过（node 文件名）启动服务器 node .\app.js 这样我们就得到了一个简单的服务器，但更改代码后需要手动更新。随便写的假数据，按理说应该是查询数据库进行数据的返回的，本文主要进行一些简单的案例，关于复杂的以及数据库的操作，下次再说。
2023-12-24 23:45:33
525
原创 JavaScript的遍历方法(常用)
js中有哪些循环遍历的方法嘞1.forEach 方法用于调用数组的每个元素，并将元素传递给回调函数。数组中的每个值都会调用回调函数。注意:forEach没有返回值,不会修改原数组。
2023-12-02 18:24:08
408
1
原创 JavaScript中的Map对象和Set对象
提示：对象和对象有什么区别Object对象:Map对象:Set对象有什么区别,以及各自的优缺点和用法提示：以下是本篇文章正文内容，下面案例可供参考Map对象和object一样是用于保存键值对。但是Map对象任何值(对象或者原始值) 都可以作为一个键或一个值。Set对象常用于数组去重。
2023-12-01 17:03:05
430
1
原创 JavaScript中的深拷贝和浅拷贝
作用就是将一个或者多个源对象中所有可枚举的自有属性复制到目标对象，并返回修改后的目标对象。如果目标对象与源对象具有相同的键（属性名），则目标对象中的属性将被源对象中的属性覆盖，后面的源对象的属性将类似地覆盖前面的源对象的同名属性。注意:JSON对象这个方法对数组有用,但是对对象没用,原因就是JSON.parse(_obj)虽然可以将”"去除，但是不能去除对象的。浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用(地址)，所以改变新对象，旧对象也会改变，因为新旧对象共享一块内存。在一维数组里面使用…
2023-11-30 11:59:27
332
原创 Es6语法 class类(详细)
class类的定义和函数一样分为命名类和匿名类//命名类//匿名类注意：函数声明和类声明之间的一个重要区别在于，函数声明会提升，类声明不会。需要先声明类，然后再访问它class类的本质其实就是函数。
2023-11-30 11:58:17
1124
原创 防抖和节流(使用场景以及区别)
我相信同学也经常碰到这种问题,就是一些事件持续触发而达不到自己想要的效果。在这里举个例子就一个简单的鼠标移动事件,但是我想要的是移动只是触发一次,但是它一直给我调用,就很烦,所以就需要解决,那么有什么办法呢?JS函数防抖和节流就是用来处理频繁触发的函数执行问题的常用方法为什么会有两种方法嘞?那肯定是他们的使用环境有区别咯首先和大家介绍一下。
2023-11-29 10:00:56
747
1
原创 ajax基础使用
http.send(JSON.stringify({ “userId”:10, “title”:“hello”, “body”:“你好”});responseText:.响应(获取接口返回值)http.responseText()获得字符串形式的响应数据。2. http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。3. http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。第二个参数是一个对象,里面的值就是上传的数据。
2023-11-29 10:00:19
1066
1
原创 symbol类型基础认识
注意:通过 Symbol 方法创建值的时候不可使用 new 操作符，原因是通过 new 实例化的结果是一个 object 对象，而不是原始类型的 symbol。注意的是就算是传入相同的参数，生成的 symbol 值也是不相等的，因为 Symbol 本来就是独一无二的意思。方法且有相同参数创建的symbol 值，如果存在则返回已经存在的值(所以就会有相等的值)，如果不存在则新建。Symbol.keyFor 方法返回一个使用 Symbol.for 方法创建的 symbol 值的 key。
2023-10-11 09:42:03
58
原创 transfrom转换
translate如果只给出一个值,表示x轴方向移动距离单独设置某个方向的移动距离 translateX 和 translateY。
2023-09-24 21:52:19
63
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人