- 博客(21)
- 收藏
- 关注
RSS订阅原创 vue-cli脚手架之我一定要吐槽，No Babel config file detected
因此，始终在项目的根目录中执行命令是一个良好的实践。确保你的项目结构清晰，配置文件存在并且路径正确，可以帮助你避免类似问题。的错误，通常是因为 Babel 在查找配置文件时没有找到相关文件。这种情况可能与项目目录的结构和 Babel 的工作方式有关。刚开始使用vue-cli搭建项目，初始化项目了后，什么也没有修改马上就出现了错误，然后到处排查。当你在项目根目录中运行命令时，Babel 能够找到正确的配置文件，从而避免了。在使用 Vue CLI 搭建项目时遇到。
2024-10-05 10:56:41
929
1
原创 构造函数继承
主要通过在子类的构造函数中调用父类的构造函数，绑定子类实例的 this，从而实现子类对父类属性的继承。这种方法避免了父类和子类共享原型链上的属性，并且可以传递参数给父类的构造函数。在子类的构造函数中，使用 call() 或 apply() 方法调用父类的构造函数，并将子类的 this 绑定到父类的构造函数中。这样父类的属性和方法就会被绑定到子类的实例上，而不是子类的原型链上，避免了子类修改影响父类。解决构造函数被重复调用的问题，将指向父类实例改为父类的原型，减少父类构造函数的调用。
2024-10-02 14:46:29
424
原创 深入理解JavaScript 的原型继承
JavaScript 的原型链继承机制和 Java 的类继承机制有明显的区别，虽然它们都用于实现对象之间的继承，但它们的实现方式、概念以及运行机制都不同。
2024-10-02 14:28:11
2374
原创 深入理解call、bind、和apply的使用以及底层代码手写
call和 applycall使用逗号分隔的参数列表，而apply使用数组。bind返回一个新函数，不会立即调用，可以用于创建带有固定this值和部分参数的函数。
2024-10-01 11:26:26
2177
原创 全局预编译与函数预编译
创建后，js代码执行前的一段时期，在这个时期，会对js代码进行预处理。函数上下文创建后，会生成活动变量对象AO。全局上下文创建后，会生成变量对象VO。
2024-09-30 23:58:35
260
原创 理解与掌握JS作用域与作用域链
首先在创建fn函数时，会创建一个预先包含全局变量对象的作用域链，这个作用域链被保存在内部Scope属性中，当调用fn函数时，会为函数创建一个执行环境，然后通过复制内部的Scope属性中的对象构建起执行环境的作用域链，然后创建活动对象AO并推入执行环境的作用域链。在fn执行完成后，作用域被消毁。1、通过let和const声明会形成块级作用域，与其他作用域一样，对外不可见。执行环境中变量或函数的作用范围，作用域定义变量或函数有权访问的其他数据，作用域都有一个变量对象。：保证对执行环境中变量和函数的有序访问。
2024-09-30 23:06:28
579
原创 vue3实现组件通信
父 -> 子通信：通过props和。子 -> 父通信：通过$emit和。跨组件通信：通过事件总线（如mitt）或 Pinia（状态管理）。跨级组件通信：使用provide和inject。访问子组件实例：通过ref。透传attrs和listeners。这些方法在组合式 API 的支持下变得更加简洁高效，非常适合在 Vue 3 中使用。
2024-09-08 23:39:31
1562
原创 对compiler(编译器)的理解
Vue 的编译器是 Vue 框架中的一个重要模块，它将模板转换为渲染函数，帮助开发者通过声明式的方式定义 UI，而 Vue 会自动高效地处理数据变化和 DOM 更新。编译器在 Vue 的构建过程中通常是透明的，但在深入理解 Vue 工作原理时，了解编译器如何工作对性能优化等有很大帮助。
2024-09-07 14:15:26
1320
原创 从底层代码理解Vue 响应式系统的核心机制
依赖收集：在组件渲染过程中，Vue 会通过访问响应式数据触发getter，并将当前正在渲染的Watcher与数据属性建立依赖关系。Dep是一个依赖管理器，负责管理该数据属性与哪些Watcher相关。变化检测与更新：当数据变化时，Vue 会触发数据属性的setter，通过Dep通知所有依赖该属性的Watcher。Watcher会执行update()方法，从而触发视图的重新渲染。这个过程就是 Vue 响应式系统的核心机制，确保视图和数据之间的自动同步。
2024-09-07 13:57:12
1157
原创 vue的响应式数据更新机制
Observer：将普通对象转换为响应式对象，劫持属性的getter和setter。Dep：依赖管理器，负责依赖收集和通知更新。Watcher：观察者，记录依赖并在数据变化时执行更新操作。Scheduler：调度器，批量处理更新，保证性能。通过这些核心部件，Vue 实现了高效的响应式数据更新机制。
2024-09-05 20:36:59
1590
原创 对 Vue 生命周期的详细总结
理解 Vue.js 的生命周期对于有效地构建和维护 Vue 应用至关重要。本文是 Vue 生命周期的详细解释，包括每个阶段的生命周期钩子、它们的作用、以及如何利用这些钩子进行组件管理和数据处理。
2024-09-04 15:16:29
2173
1
原创 对Vue组件生命周期的理解
创建: 组件实例被创建，钩子执行。初始化数据datamethods等初始化完成，created钩子执行。编译模板: Vue 将模板编译成虚拟 DOM，钩子执行。挂载 DOM: 虚拟 DOM 渲染为真实 DOM，并插入页面，mounted钩子执行。更新渲染: 当数据变化时，组件重新渲染，和updated钩子分别在更新前后执行。卸载: 组件即将销毁和已经销毁时，分别执行和unmounted钩子。
2024-09-04 15:02:18
1451
原创 深入了解API 与 `axios` 实例之间的原理
让我们深入了解 API 与 `axios` 实例之间的原理，探索它们如何协同工作来实现网络请求。
2024-08-22 09:36:58
828
原创 `v-lazy` 指令实现懒加载图像或其他资源
在 Vue 中，v-lazy指令通常用于懒加载图像或其他资源，以优化性能。配合 Vite 的，你可以实现图像的懒加载，在图像需要展示时再加载，避免不必要的资源消耗。下面是一个结合v-lazy和的简单示例。
2024-08-19 16:23:47
832
原创 vue3的v-model
v-model在 Vue 3 中，自定义组件中可以使用v-model，而且可以绑定到不同的属性上。解释组件中，使用了modelValue作为v-model的绑定属性，并通过事件将输入框的变化通知父组件。父组件中，将text与组件中的modelValue属性绑定在一起，实现了双向数据绑定。v-model在 Vue 3 中变得更加灵活和强大，支持多属性绑定和修饰符，能够应对各种复杂的双向数据绑定需求。
2024-08-19 15:53:46
658
原创 兄弟组件传值||共享状态、事件总线 (Event Bus) 和依赖 Vuex以及mitt
兄弟组件之间传递参数的方式有很多，选择适合自己应用的方式非常重要。对于简单的应用，可以使用props和事件。对于中等复杂的应用，事件总线是一个有效的选择。而对于大型应用，Vuex 是推荐的解决方案。
2024-08-19 11:09:29
626
原创 依赖注入provide/inject
provide和inject是 Vue 3 提供的强大工具，简化了组件间的数据传递，尤其是在组件树较深时。它们让祖先组件能够将数据提供给任意深度的后代组件，而不需要通过 props 逐层传递，保持代码简洁和可维护性。
2024-08-19 11:01:47
525
原创 响应式API：理解并掌握ref
ref 是 Vue 3 中管理响应式状态的重要工具，本文简绍了响应式数据，以及着重介绍了ref的原理以及扩展使用，通过灵活运用这些 API，你可以高效地管理组件状态，并创建更复杂的响应式逻辑。
2024-08-18 01:43:56
1001
原创 虚拟DOM和diff算法
虚拟 DOM：是一个抽象的 DOM 表示，减少直接操作真实 DOM 的次数，提高性能。diff 算法：用于比较两个虚拟 DOM 树之间的差异，并计算最小的更新操作，从而高效地更新真实 DOM。
2024-08-17 19:01:11
841
原创 区别vue中:class和:style
class 和 style 是用来设置 HTML 元素的 CSS 样式的两个不同属性。它们在 Vue 模板中使用时的一些关键的区别和特性
2024-08-17 17:03:41
856
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人