itpeilibo-CSDN博客

原创【TypeScript】TS 看这一篇就够了

目标：能够理解TypeScript中有哪些数据类型可以将 TS 中的常用基础类型细分为两类：JS 已有类型原始类型，简单类型（复杂数据类型（数组，对象，函数等）TS 新增类型联合类型自定义类型（类型别名）接口元组字面量类型枚举void泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class 中需求：创建一个 id 函数，传入什么数据就返回该数据本身(也就是说，参数和返回值类型相同)

2023-02-06 00:20:56 4415 17

原创 Vue3详细讲解

为什么要学vue3:1. Vue是国内最火的前端框架,2.Vue 3 于 2022 年 2 月 7 日星期一成为新的默认版本！3. Vue3性能更高，体积更小,4. Vue3.0在经过一年的迭代后，越来越好用.动机与目的: 1. 更好的逻辑复用与代码组织 (composition组合式api) optionsAPI(旧) => compositionAPI（新）, 效果: 代码组织更方便了, 逻辑复用更方便了非常利于维护!2.更好的类型推导 (typescript支持)

2022-12-31 22:20:12 20696 10

原创 webpack看这一篇就够了

能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩

2022-06-20 00:09:47 55180 32

原创「webpack面试系列」说说你对webpack的理解？解决了什么问题？（收藏好，用时好找）

但这种模块弊端十分的明显，模块都是在全局中工作，大量模块成员污染了环境，模块与模块之间并没有依赖关系、维护困难、没有私有空间等问题。，项目维护性增强，支持不同种类的前端模块类型，统一的模块化方案，所有资源文件的加载都可以通过代码控制。标签在页面引入这些模块的，这些模块的加载并不受代码的控制，时间一久维护起来也十分的麻烦。上述的方式都是早期解决模块的方式，但是仍然存在一些没有解决的问题。除了模块加载的问题以外，还需要规定模块化的规范，如今流行的则是。，提高性能，可维护性，解决浏览器频繁请求文件的问题。

2024-01-23 08:47:43 1099 6

原创「Vue3面试系列」Vue 3.0中如果想实现一个 Modal组件应该怎么设计？

现在有一个场景，点击新增与编辑都弹框出来进行填写，功能上大同小异，可能只是标题内容或者是显示的主体内容稍微不同。组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式。这样，下次开发相同界面程序时就可以写更少的代码，意义着更高的开发效率，更少的。这时候就没必要写两个组件，只需要根据传入的参数不同，组件显示不同内容即可。内置组件进行包裹，其相当于传送门，将里面的内容传送至。主体内容需要灵活，所以可以是字符串，也可以是一段。组件内部是如何处理「确定」「取消」事件的，既然是。

2024-01-16 14:26:40 1136 2

原创「Vue3面试系列」Vue 3.0中Treeshaking特性有哪些？

如果把代码打包比作制作蛋糕，传统的方式是把鸡蛋（带壳）全部丢进去搅拌，然后放入烤箱，最后把（没有用的）蛋壳全部挑选并剔除出去。实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到。模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量。是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫。中，无论我们使用什么功能，它们最终都会出现在生产代码中。简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码。再一次打包，发现打包出来的体积并没有变化。

2024-01-11 16:08:22 562 2

原创「Vue3面试系列」Vue3 所采用的 Composition Api 与 Vue2 使用的 Options Api 有什么不同？

在 Vue3 Composition API 中，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）正是解决上述问题，将某个逻辑关注点相关的代码全都放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中跳来跳去。在逻辑组织方面的优势，以后修改一个属性功能的时候，只需要跳到控制该属性的方法中即可。然而，当组件变得复杂，导致对应属性的列表也会增长，这可能会导致组件难以阅读和理解。即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API。

2024-01-02 09:00:34 1303 5

原创「Vue3面试系列」Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？

只能遍历对象属性进行劫持return})Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的= null) {return obj// Proxy相当于在对象外层加拦截console.log(`获取${= null) {return obj } // Proxy相当于在对象外层加拦截 const observed = new Proxy(obj , {

2023-12-25 09:22:18 968

原创「Vue3面试系列」Vue3.0性能提升主要是通过哪几方面体现的？

这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用。可以看到，组件内部只有一个动态节点，剩余一堆都是静态节点，所以这里很多。中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小。关于这两个 API 具体的不同，我们下篇文章会进行一个更加详细的介绍。整体体积变小了，除了移出一些不常用的API，再重要的是。实例，它会在组件渲染的过程中把用到的数据。在编译阶段，做了进一步优化。

2023-12-22 09:21:52 1025 2

原创「Vue3面试系列」Vue3.0的设计目标是什么？做了哪些优化?

这样使得模块拆分更细化，职责划分更明确，模块之间的依赖关系也更加明确，开发人员也更容易阅读、理解和更改所有模块源码，提高代码的可维护性。试想一下，如果很多类似的第三方库，我们只需要调用即可，不必关注实现过程，开发效率大大提高。这种形式，可以将一些复用的代码抽离出来作为一个函数，只要的使用的地方直接进行调用即可。中去递归响应式，这样的好处是真正访问到的内部对象才会变成响应式，而不是无脑递归。，可以将无用模块“剪辑”，仅打包需要的，使打包的整体体积变小了。编写的，提供了更好的类型检查，能支持复杂的类型推导。

2023-12-18 16:35:45 940 8

原创【数据结构与算法】JavaScript实现排序算法

假如有数组有10个数据，第1个数据为黑色，增量为5。那么第二个为黑色的数据index=5，第3个数据为黑色的数据index = 10（不存在）。所以黑色的数据每组只有2个，10 / 2 = 5一共可分5组，即。可以看到效率从大到小分别是：O（1）> O（logn）> O（n）> O（nlog(n)）> O（n²）> O（2n），先选出一个数据（比如65），将比其小的数据都放在它的左边，将比它大的数据都放在它的右边。以下代码实现中采用希尔排序原稿中建议的增量即。图中d表示增量gap。快速排序的核心思想是。

2023-12-12 09:59:42 994 4

原创【数据结构与算法】JavaScript实现图结构

什么是图？图结构是一种与树结构有些相似的数据结构；图论是数学的一个分支，并且，在数学中，树是图的一种；图论以图为研究对象，研究顶点和边组成的图形的数学理论和方法；事物之间的联系顶点代表事物边代表两个事物间的关系；图的特点：一组顶点：通常用V（Vertex）表示顶点的集合；一组边：通常用E（Edge）表示边的集合；边是顶点和顶点之间的连线；边可以是有向的，也可以是无向的。比如A----B表示无向，A —> B 表示有向；图的常用术语：顶点：表示图中的一个节点；边：表示。

2023-12-12 09:29:18 952 4

原创【数据结构与算法】实现红黑树

此时既满足规则4也满足规则5。尽管新节点是红色的，但是新节点N有两个黑色节点NIL，所以通向它的路径上黑色节点的个数依然相等，因此满足规则5。旋转二叉搜索树，使得父节点原来的位置被自己的右子节点替代，左子节点的位置被父节点替代；旋转二叉搜索树，使得父节点原来的位置被自己的左子节点替代，右子节点的位置被父节点替代；在二叉树中依次插入节点：10，9，8，7，6，5，4，3，2，1。节点P是红色节点，节点U是黑色节点，并且节点N为节点P的。节点P是红色节点，节点U是黑色节点，并且节点N为节点P的。

2023-12-11 09:39:06 814 2

原创【数据结构与算法】JavaScript实现二叉搜索树

什么是二叉搜索树? 二叉搜索树（BST，Binary Search Tree），也称二叉排序树或二叉查找树二叉搜索树是一颗二叉树, 可以为空；如果不为空，满足以下性质：非空左子树的所有键值小于其根结点的键值。非空右子树的所有键值大于其根结点的键值。左、右子树本身也都是二叉搜索树。二叉搜索树的特点:二叉搜索树的特点就是相对较小的值总是保存在左结点上, 相对较大的值总是保存在右结点上,那么利用这个特点, 我们可以做什么事情呢?查找效率非常高, 这也是二叉搜索树中, 搜索的来源.二叉树搜索树的基本属性：

2023-12-04 09:41:16 952 2

原创【数据结构与算法】JavaScript实现树结构

什么是树？树一般都有一个根，连接着根的是树干；树干会发生分叉，形成许多树枝，树枝会继续分化成更小的树枝；树枝的最后是叶子；现实生活中很多结构都是树的抽象，模拟的树结构相当于旋转180°的树。树结构对比于数组/链表/哈希表有哪些优势呢：优点：可以通过下标值访问，效率高；缺点：查找数据时需要先对数据进行排序，生成有序数组，才能提高查找效率；并且在插入和删除元素时，需要大量的位移操作；优点：数据的插入和删除操作效率都很高；查找效率低，需要从头开始依次查找，直到找到目标数据为止；

2023-11-27 09:00:00 1224 4

原创【数据结构与算法】JavaScript实现双向链表

双向链表：既可以从头遍历到尾，又可以从尾遍历到头。也就是说链表连接的过程是双向的，它的实现原理是：一个节点既有向前连接的引用，也有一个向后连接的引用。每次在插入或删除某个节点时，都需要处理四个引用，而不是两个，实现起来会困难些；相对于单向链表，所占内存空间更大一些；但是，相对于双向链表的便利性而言，这些缺点微不足道。双向链表不仅有head指针指向第一个节点，而且有tail指针指向最后一个节点；item储存数据、prev指向前一个节点、next指向后一个节点；

2023-11-20 09:00:00 147 2

原创【数据结构与算法】JavaScript实现单向链表

链表和数组一样，可以用于存储一系列的元素，但是链表和数组的实现机制完全不同。链表的每个元素由一个存储元素本身的节点和一个指向下一个元素的引用（有的语言称为指针或连接）组成。类似于火车头，一节车厢载着乘客（数据），通过节点连接另一节车厢。head属性指向链表的第一个节点；链表中的最后一个节点指向null；当链表中一个节点也没有的时候，head直接指向null；数组的创建通常需要申请一段连续的内存空间（一整块内存），并且大小是固定的。所以当原数组不能满足容量需求时，需要扩容。

2023-11-13 09:00:00 292 2

原创【数据结构与算法】JavaScript实现哈希表

哈希表通常是基于数组哈希表可以提供非常快速的插入-删除-查找操作；无论多少数据，插入和删除值都只需要非常短的时间，即O(1)的时间级。实际上，只需要几个机器指令即可完成；哈希表的速度比树还要快，基本可以瞬间查找到想要的元素。但是相对于树来说编码要简单得多。哈希表同样存在不足之处哈希表中的数据是没有顺序的，所以不能以一种固定的方式（比如从小到大）来遍历其中的元素。通常情况下，哈希表中的key是不允许重复的，不能放置相同的key，用于保存不同的元素。哈希表是什么？

2023-11-06 09:00:00 793 2

原创【数据结构与算法】JavaScript实现集合与字典

集合比较常见的实现方式是哈希表，这里使用JavaScript的Object类进行封装。集合通常是由一组无序的不能重复的元素构成。数学中常指的集合中的元素是可以重复的，但是计算机中集合的元素不能重复。特殊之处在于里面的元素没有顺序也不能重复。没有顺序意味着不能通过下标值进行访问，不能重复意味着相同的对象在集合中只会存在一份。实现集合类在ES6中的Set类就是一个集合类，这里我们重新封装一个Set类，了解集合的底层实现。JavaScript中的Object类中的key。

2023-10-30 09:00:00 315 2

原创【数据结构与算法】JavaScript实现队列结构（Queue）

队列是是一种受限的线性表，特点为先进先出FIFO受限之处在于它只允许在表的前端（front）进行删除操作；在表的后端（rear）进行插入操作；相当于排队买票，先来的先买票，后来的后买票。打印队列：计算机打印多个文件的时候，需要排队打印；线程队列：当开启多线程时，当新开启的线程所需的资源不足时就先放入线程队列，等待CPU处理；基于数组实现；基于链表实现；enqueue（element）：向队列尾部添加一个（或多个）新的项；

2023-10-23 09:26:54 756 2

原创【数据结构与算法】JavaScript实现栈结构（Stack）

数据结构就是在计算机中，存储和组织数据的方式。例如：图书管理，怎样摆放图书才能既能放很多书，也方便取？操作一：新书怎么插入？操作二：怎么找到某本指定的书？常见的数据结构：数组（Aarray）栈（Stack）链表图（Graph）散列表（Hash）队列（Queue）树（Tree）堆（Heap）注意：数据结构与算法与语言无关，常见的编程语言都有直接或间接的使用上述常见的数据结构。算法（Algorithm）的定义一个有限指令集，每条指令的描述不依赖于语言；

2023-10-18 11:05:47 219 4

原创【Vue2.0源码学习】生命周期篇-销毁阶段(destroy)

接下来到了生命周期流程的最后一个阶段——销毁阶段。从官方文档给出的生命周期流程图中可以看到，当调用了方法，Vue实例就进入了销毁阶段，该阶段所做的主要工作是将当前的Vue实例从其父级实例中删除，取消当前实例上的所有依赖追踪并且移除实例上的所有事件监听器。也就是说，当这个阶段完成之后，当前的Vue实例的整个生命流程就全部走完了，最终“寿终正寝”了。本篇文章就来分析一下在销毁阶段都做了哪些工作。本篇文章介绍了生命周期流程的最后一个阶段——销毁阶段。我们知道了，当调用了实例上的。

2023-10-07 09:17:19 2411 1

原创【Vue2.0源码学习】生命周期篇-挂载阶段(mount)

模板编译阶段完成之后，接下来就进入了挂载阶段，从官方文档给出的生命周期流程图中可以看到，挂载阶段所做的主要工作是创建Vue实例并用其替换el选项对应的DOM元素，同时还要开启对模板中数据（状态）的监控，当数据（状态）发生变化时通知其依赖进行视图更新。本篇文章介绍了生命周期中的第三个阶段——挂载阶段。在该阶段中所做的主要工作是创建Vue实例并用其替换el选项对应的DOM元素，同时还要开启对模板中数据（状态）的监控，当数据（状态）发生变化时通知其依赖进行视图更新。

2023-09-25 07:35:31 420 2

原创【Vue2.0源码学习】生命周期篇-模板编译阶段(template)

前几篇文章中我们介绍了生命周期的初始化阶段，我们知道，在初始化阶段各项工作做完之后调用了vm.$mount方法，该方法的调用标志着初始化阶段的结束和进入下一个阶段，从官方文档给出的生命周期流程图中可以看到，下一个阶段就进入了模板编译阶段，该阶段所做的主要工作是获取到用户传入的模板内容并将其编译成渲染函数。模板编译阶段并不是存在于Vue的所有构建版本中，它只存在于完整版（即vue.js）中。在只包含运行时版本（即）中并不存在该阶段，这是因为当使用vue-loader或vueify时，*.vue。

2023-09-18 07:32:59 405 2

原创【Vue2.0源码学习】生命周期篇-初始化阶段(initState)

本篇文章介绍生命周期初始化阶段所调用的第五个初始化函数——initState。从函数名字上来看，这个函数是用来初始化实例状态的，那么什么是实例的状态呢？在前面文章中我们略有提及，在我们日常开发中，在Vue组件中会写一些如propsdatamethodscomputedwatch选项，我们把这些选项称为实例的状态选项。也就是说，initState函数就是用来初始化这些状态的，那么接下来我们就来分析该函数是如何初始化这些状态选项的。本篇文章介绍了生命周期初始化阶段所调用的第五个初始化函数——initState。

2023-09-11 07:27:59 440 2

原创【Vue2.0源码学习】生命周期篇-初始化阶段(initInjections)

本篇文章介绍生命周期初始化阶段所调用的第四个初始化函数——。从函数名字上来看，该函数是用来初始化实例中的inject选项的。说到inject选项，那必然离不开provide选项，这两个选项都是成对出现的，它们的作用是：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。并且provide选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持Symbol和。

2023-09-04 07:18:52 624 4

原创【Vue2.0源码学习】生命周期篇-初始化阶段(initEvents)

本篇文章介绍生命周期初始化阶段所调用的第二个初始化函数——initEvents。从函数名字上来看，这个初始化函数是初始化实例的事件系统。我们知道，在Vue中，当我们在父组件中使用子组件时可以给子组件上注册一些事件，这些事件即包括使用v-on或注册的自定义事件，也包括注册的浏览器原生事件（需要加.native修饰符），如下：

2023-08-28 07:16:22 418 6

原创【Vue2.0源码学习】生命周期篇-初始化阶段(initLifecycle)

在上篇文章中，我们介绍了生命周期初始化阶段的整体工作流程，以及在该阶段都做了哪些事情。我们知道了，在该阶段会调用一些初始化函数，对Vue实例的属性、数据等进行初始化工作。那这些初始化函数都初始化了哪些东西以及都怎么初始化的呢？接下来我们就把这些初始化函数一一展开介绍，本篇文章介绍第一个初始化函数。本篇文章介绍了初始化阶段调用的第一个初始化函数——函数。该函数的逻辑非常简单，就是给实例初始化了一些属性，包括以开头的供用户使用的外部属性，也包括以开头的供内部使用的内部属性。

2023-08-22 07:21:45 518 4

原创【Vue2.0源码学习】生命周期篇-初始化阶段(new Vue)

在Vue中，每个Vue实例从被创建出来到最终被销毁都会经历一个过程，就像人一样，从出生到死亡。在这一过程里会发生许许多多的事，例如设置数据监听，编译模板，组件挂载等。在Vue中，把Vue实例从被创建出来到最终被销毁的这一过程称为Vue实例的生命周期，同时，在Vue实例生命周期的不同阶段Vue还提供了不同的钩子函数，以方便用户在不同的生命周期阶段做一些额外的事情。那么，接下来的几篇文章我们就从源码角度深入剖析一下一个Vue实例在从生到死的生命周期里到底都经历了些什么，每个阶段都做了哪些事情。

2023-08-14 08:30:00 572 2

原创【Vue2.0源码学习】模板编译篇-模板解析阶段(总结)

到现在，模板编译的三大阶段就已经全部介绍完毕了，接下来本篇文章，就以宏观角度回顾并梳理一下模板编译整个流程是怎样的。首先，我们需要搞清楚模板编译的最终目的是什么，它的最终目的就是：把用户所写的模板转化成供Vue实例在挂载时可调用的render函数。或者你可以这样简单的理解为：模板编译就是一台机器，给它输入模板字符串，它就输出对应的render函数。我们把模板编译的最终目的只要牢记在心以后，那么模板编译中间的所有的变化都是在为达到这个目的而努力。接下来我们就以宏观角度来梳理一下模板编译的整个流程。

2023-07-24 08:42:07 320

原创【Vue2.0源码学习】模板编译篇-模板解析(代码生成阶段)

经过前几篇文章，我们把用户所写的模板字符串先经过解析阶段解析生成对应的抽象语法树AST，接着再经过优化阶段将AST中的静态节点及静态根节点都打上标记，现在终于到了模板编译三大阶段的最后一个阶段了——代码生成阶段。所谓代码生成阶段，到底是要生成什么代码？答：要生成render函数字符串。我们知道，Vue实例在挂载的时候会调用其自身的render函数来生成实例上的template选项所对应的VNode，简单的来说就是Vue只要调用了render函数，就可以把模板转换成对应的虚拟DOM。那么Vue要想调用。

2023-07-20 08:30:00 367

空空如也

空空如也