- 博客(11)
- 收藏
- 关注
原创 对 Vue 生命周期的详细总结
理解 Vue.js 的生命周期对于有效地构建和维护 Vue 应用至关重要。本文是 Vue 生命周期的详细解释,包括每个阶段的生命周期钩子、它们的作用、以及如何利用这些钩子进行组件管理和数据处理。
2024-09-04 15:16:29
562
原创 对Vue组件生命周期的理解
创建: 组件实例被创建,钩子执行。初始化数据datamethods等初始化完成,created钩子执行。编译模板: Vue 将模板编译成虚拟 DOM,钩子执行。挂载 DOM: 虚拟 DOM 渲染为真实 DOM,并插入页面,mounted钩子执行。更新渲染: 当数据变化时,组件重新渲染,和updated钩子分别在更新前后执行。卸载: 组件即将销毁和已经销毁时,分别执行和unmounted钩子。
2024-09-04 15:02:18
645
原创 深入了解API 与 `axios` 实例之间的原理
让我们深入了解 API 与 `axios` 实例之间的原理,探索它们如何协同工作来实现网络请求。
2024-08-22 09:36:58
674
原创 `v-lazy` 指令实现懒加载图像或其他资源
在 Vue 中,v-lazy指令通常用于懒加载图像或其他资源,以优化性能。配合 Vite 的,你可以实现图像的懒加载,在图像需要展示时再加载,避免不必要的资源消耗。下面是一个结合v-lazy和的简单示例。
2024-08-19 16:23:47
292
原创 vue3的v-model
v-model在 Vue 3 中,自定义组件中可以使用v-model,而且可以绑定到不同的属性上。解释组件中,使用了modelValue作为v-model的绑定属性,并通过事件将输入框的变化通知父组件。父组件中,将text与组件中的modelValue属性绑定在一起,实现了双向数据绑定。v-model在 Vue 3 中变得更加灵活和强大,支持多属性绑定和修饰符,能够应对各种复杂的双向数据绑定需求。
2024-08-19 15:53:46
354
原创 兄弟组件传值||共享状态、事件总线 (Event Bus) 和依赖 Vuex以及mitt
兄弟组件之间传递参数的方式有很多,选择适合自己应用的方式非常重要。对于简单的应用,可以使用props和事件。对于中等复杂的应用,事件总线是一个有效的选择。而对于大型应用,Vuex 是推荐的解决方案。
2024-08-19 11:09:29
191
原创 依赖注入provide/inject
provide和inject是 Vue 3 提供的强大工具,简化了组件间的数据传递,尤其是在组件树较深时。它们让祖先组件能够将数据提供给任意深度的后代组件,而不需要通过 props 逐层传递,保持代码简洁和可维护性。
2024-08-19 11:01:47
356
原创 响应式API:理解并掌握ref
ref 是 Vue 3 中管理响应式状态的重要工具,本文简绍了响应式数据,以及着重介绍了ref的原理以及扩展使用,通过灵活运用这些 API,你可以高效地管理组件状态,并创建更复杂的响应式逻辑。
2024-08-18 01:43:56
641
原创 虚拟DOM和diff算法
虚拟 DOM:是一个抽象的 DOM 表示,减少直接操作真实 DOM 的次数,提高性能。diff 算法:用于比较两个虚拟 DOM 树之间的差异,并计算最小的更新操作,从而高效地更新真实 DOM。
2024-08-17 19:01:11
626
原创 区别vue中:class和:style
class 和 style 是用来设置 HTML 元素的 CSS 样式的两个不同属性。它们在 Vue 模板中使用时的一些关键的区别和特性
2024-08-17 17:03:41
140
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人