- 博客(23)
- 收藏
- 关注
RSS订阅原创 媒体查询：响应式设计的核心
媒体查询是CSS3引入的一项强大功能，它允许开发者根据设备的特性（如屏幕宽度、设备类型、分辨率等）来应用不同的样式规则。通过媒体查询，我们可以根据设备的屏幕尺寸自动调整页面的布局、字体大小、图片尺寸等，从而为用户提供更加舒适和便捷的浏览体验。规则来定义条件表达式。条件表达式可以是设备的媒体类型（如。媒体查询的语法非常简洁明了，它使用。等）以及逻辑运算符（如。等）、设备的特性（如。
2024-05-21 20:57:05
221
原创 Vue 3 中的常用生命周期函数使用场景详解
Vue 3 的生命周期钩子为开发者提供了在组件生命周期的不同阶段执行特定逻辑的能力。通过合理使用这些钩子，我们可以更好地管理组件的状态、DOM 操作和副作用，从而创建出更高效、更健壮的 Vue 应用程序。每个钩子都有其特定的使用场景，了解并正确使用它们可以大大提高我们的开发效率。
2024-05-05 21:06:01
1125
1
原创 Vue 3 中的 h() 与 mergeProps() API 详解
在 Vue 3 中，随着 Composition API 的引入，我们有了更多的灵活性和控制权来构建我们的组件。其中，h()函数和是在构建渲染函数或 JSX/TSX 时经常使用的两个工具。下面，我将对这两个 API 进行详细的解释。h()
2024-05-05 20:39:52
411
1
原创 JavaScript中的防抖（Debounce）和节流（Throttle）：作用与使用方式
防抖和节流是优化高频触发事件处理的两种常用技术。防抖侧重于限制函数在一定时间内只执行一次，而节流则侧重于限制函数在一定时间内执行的次数。在实际开发中，我们可以根据具体需求选择合适的技术来优化性能。
2024-05-03 20:42:42
385
3
原创 JavaScript中的深拷贝与浅拷贝
深拷贝和浅拷贝在处理JavaScript对象时有着显著的区别。浅拷贝只复制对象的顶层属性，如果属性值是引用类型，则复制的是引用地址；而深拷贝会递归地复制对象的所有属性，包括子对象，使得新对象和原对象是完全独立的。在实际开发中，需要根据具体的需求来选择使用哪种拷贝方式，并注意各种拷贝方法的限制和优缺点。
2024-05-02 19:37:05
424
2
原创 Vue中数据双向绑定的原理与流程
Vue.js 是一个流行的前端 JavaScript 框架，它以其简洁的 API、轻量级和高效的数据双向绑定机制而广受欢迎。在 Vue 中，数据双向绑定（也称为双向数据绑定）是核心功能之一，它允许视图（View）和模型（Model）之间的双向通信。本文将详细讲解 Vue 中数据双向绑定的原理与流程。Vue 的数据双向绑定主要基于 MVVM（Model-View-ViewModel）架构。MVVM 将传统的 MVC 模式中的 View 层进一步拆分为 View 和 ViewModel。
2024-05-01 19:49:00
1058
原创 深入理解 JavaScript 继承机制
在 JavaScript 中，继承是一种强大的特性，它允许我们基于已有的对象（称为父类或基类）创建新的对象（称为子类或派生类）。子类可以继承父类的属性和方法，同时又可以添加新的属性和方法，实现代码的复用和扩展。它使用原型链实现对父类原型属性和方法的继承，同时通过借用构造函数实现对父类实例属性和方法的继承。），而原型对象本身也是一个对象，也有自己的原型对象，这样就形成了一个原型链。原型链继承的基本思想是，让子类的原型对象指向父类的一个实例。借用构造函数继承的基本思想是，在子类构造函数中调用父类构造函数，用。
2024-04-30 19:20:28
436
原创 JavaScript原型链深度剖析
在JavaScript的世界中，原型链（Prototype Chain）是一个核心概念，它决定了对象如何继承属性和方法。对于初学者来说，理解原型链可能是个挑战，但一旦掌握了它，就能更好地利用JavaScript的动态性和灵活性。本篇文章将详细探讨JavaScript的原型链，帮助大家深入理解其工作原理。
2024-04-29 20:33:39
1972
1
原创 深入解析闭包、作用域链与this
在JavaScript中，闭包、作用域链和this是三个非常重要的概念，它们与函数的执行环境和变量解析密切相关。下面，我们将逐一深入解析这三个概念。
2024-04-28 16:12:01
653
3
原创 深入理解异步编程模型：Promise与async/await
在现代前端开发中，异步编程模型已经成为处理耗时操作、避免阻塞UI线程以及提高应用性能的关键技术。Promise和async/await是两种广泛使用的异步编程模型，它们帮助我们更好地管理异步操作，提高代码的可读性和可维护性。本文将深入探讨这两种异步编程模型的工作原理、使用场景以及最佳实践。
2024-04-27 22:09:14
915
5
原创 Vue 3中的defineEmits()和defineProps()解析
在Vue 3中，Composition API的引入为开发者带来了更灵活、更强大的组件开发体验。其中，和这两个函数在语法中扮演着至关重要的角色，它们分别用于定义组件触发的事件和接收的属性，从而实现了组件间的有效通信。一、defineProps()：明确接收外部数据在Vue中，组件间的数据传递通常通过props实现。而在Vue 3的Composition API中，函数则用于在中声明组件期望接收的props。通过，我们可以明确指定每个prop的类型、默认值以及验证函数，从而确保组件接收到的数据符合预期。
2024-04-26 13:53:39
478
2
原创 Vue组件渲染机制全解析
template是Vue组件选项中的一个重要属性，它用于声明组件的HTML模板。这个模板是一个字符串，描述了组件在渲染时应该呈现出的结构。当Vue运行时遇到template选项，它会使用模板编译器将其转换成一个渲染函数（render函数）。这意味着，只有当你使用包含模板编译器的Vue构建版本时，template选项才会被支持。在template中，我们可以使用Vue的指令（如v-for、v-if等）来动态地控制元素的渲染和行为。
2024-04-25 21:04:47
443
5
原创 Vue组合式API进阶:深入了解进阶API
shallowRef在 Vue 3 的组合式 API 中，允许你创建一个只对其.value属性进行浅响应式的引用。这意味着，当你修改shallowRef所引用的对象的内部属性时，Vue 的响应式系统不会触发更新。只有当你替换整个对象时，视图才会更新。这种特性在某些场景下非常有用，特别是当你处理大型对象或数组，并且你只想对整个对象的替换进行响应式追踪，而不是其内部属性的变化时。使用shallowRef可以避免不必要的性能开销，因为 Vue 不需要追踪对象内部属性的变化。
2024-04-25 20:37:08
737
4
原创 Vue 3 组合式API深度剖析：工具函数详解
组合式API除了为我们提供一些核心API，还为我们提供了很多工具函数。核心API详解请移步另一篇博客--->Vue 3组合式API深度剖析：核心API使用指南在Vue 3中，组合式API为我们提供了一种新的方式来组织和管理组件的逻辑。与选项式API不同，组合式API通过导入各种函数来提供响应式数据、生命周期钩子等功能。其中，响应式API工具函数是组合式API中非常重要的一部分，它们帮助我们更灵活地操作响应式数据。本文将详细介绍Vue 3中常用的响应式API工具函数，包括isRef()unref()
2024-04-24 22:09:15
1302
2
原创 Vue 3组合式API深度剖析：核心API使用指南
在Vue 2中，我们主要使用选项式API（Options API）来组织组件。选项式API将组件的不同部分（如data、methods、computed等）按照特定的选项进行划分。然而，随着组件复杂度的提升，这种划分方式可能导致逻辑分散，难以维护。组合式API则提供了一种新的方式来组织组件逻辑。它将组件的逻辑拆分成多个独立的函数（或称为“组合函数”），每个函数都负责处理组件的某个方面。这种方式使得逻辑更加集中，更易于复用和维护。
2024-04-23 14:24:48
1056
2
原创 深入解析$nextTick()
在Vue.js中，方法扮演着非常重要的角色，它允许我们在DOM更新完成后执行特定的回调函数。了解这个方法的工作原理和使用场景，对于我们编写高效、无bug的Vue应用具有至关重要的意义。Vue的异步更新队列Vue的响应式系统通过观察数据的变化来触发视图的更新。然而，为了提高性能，Vue并不会在每次数据变化时都立即更新DOM，而是将这些变化推入一个异步更新队列中。在下一个事件循环（event loop）中，Vue会统一执行这个队列中的所有更新操作。
2024-04-22 17:48:13
276
1
原创 WebSocket与Vue合并实现实时数据交互
通过合并Vue3与WebSocket，我们可以轻松实现Web应用的实时通信功能。Vue3提供了丰富的组件和API来构建用户界面，而WebSocket则提供了高效的实时通信机制。在实际项目中，你可以根据具体需求来定制WebSocket的通信协议和处理逻辑，以满足实时通信的各种场景。
2024-04-17 23:00:00
296
2
原创 基于Vue3组合式API：依赖注入使用技巧（Provide&Inject）
当多个组件需要共享同一份数据时，可以使用依赖注入来避免在每个组件中都显式地传递数据。在Vue中，依赖注入允许我们在父组件中提供数据或方法，然后在子组件中通过某种方式访问这些数据或方法，而不需要显式地通过props传递。依赖注入是Vue中一种强大的特性，它允许我们在父组件和子组件之间灵活地共享数据和方法。通过掌握依赖注入的使用技巧，我们可以更加高效地构建和维护Vue应用。也就是说，在一个组件中提供的数据或方法，可以在其所有子组件中被注入。在上面的示例中，我们在父组件中创建了一个响应式的。
2024-04-17 18:11:09
231
1
原创 Vue内置组件Transition与TransitionGroup：动画效果的进阶运用
Transition和TransitionGroup是Vue处理过渡效果的内置组件，它们能够帮助我们实现元素或组件的入场和离场动画，提升用户体验。
2024-04-16 17:48:06
360
1
原创 基于Vue3内置组件Teleport详解
Teleport> 是一个内置的 Vue 组件，它具备将组件内部特定的模板内容“投射”或“传输”至该组件 DOM 结构外部指定位置的功能。这一特性使得开发者能够灵活地调整页面元素的布局和嵌套关系，从而实现更高级的界面设计和交互效果。<简单地来说就像游戏中的传送门>
2024-04-15 20:17:53
338
2
原创 使用VueRouter实现多页面应用的路由跳转
Vue Router是Vue.js官方的路由管理器，用于构建单页面应用。它可以实现嵌套路由、动态路由选择、模块化路由配置等功能，并提供导航控制、HTML5历史模式、URL编码等特性。
2023-12-29 16:29:39
564
3
原创 Vue的组件通信以及数据互用
子组件中是不能直接修改父组件中的数据，只有通过$emit发送请求使父组件进行数据更新。由于Vue组件中的数据都是相互独立的，无法直接使用和访问其他组件的数据，所以当我们想使用其他组件数据的时候便使用组件通信（组件通信解释指组件和组件之间的数据传递）。父组件通过@’子组件的事件名‘="父组件处理函数"，子组件传递的数据会在父组件处理函数中存在，之后在父组件处理函数中对父组件的数据进行修改。组件A包裹了组件B和组件C，即组件A与组件B、C为父子关系，组件B和C为非父子关系。
2023-12-17 16:43:21
59
3
原创 Vuex的基础使用
Vuex是一个Vue的状态管理工具，状态就是数据。作为一个插件，可以帮忙管理Vue通用的数据（多组件共享的数据 ），使其维护数据更加方便简介，将重要数据进行集中化管理。
2023-11-22 22:01:32
59
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人