- 博客(98)
- 收藏
- 关注
RSS订阅原创 vue3+ts+pinia+vant-项目搭建
/src├── assets `静态资源，图片...`├── components `通用组件`├── router `路由`├── api `接口服务API`├── stores `状态仓库`├── styles `样式`├── types `TS类型`├── utils `工具函数`├── views `页面`├── main.ts `入口文件`└──App.vue `根组件`
2024-07-31 20:12:09
768
1
原创 vue3源码（七）渲染原理-h()
h函数是创建节点, 可实现展示template如何渲染到html中的过程，因为vue渲染到页面上是通过loader打包成模板字符串拼接渲染的，所以h函数同样也是通过字符串渲染到html中h函数就是vue中的方法，这个函数作用就是创建虚拟dom，追踪dom变化的。
2024-07-16 14:26:16
241
原创 vue3源码（六）渲染原理-runtime-core
2.init2.1 package initruntime-core/package.json2.2 调整依赖3.实现3.1 init接受一个参数渲染相关配置，提供一个方法，参数为虚拟节点和真实的元素3.2 render实现vnode如图：此时可以实现基础渲染,由于我们知道节点是文本，可以直接使用文本进行渲染，那如果里面又嵌套一个呢?为了能够判断子节点的类型，定义一个枚举比如是节点和文本的组合，节点为1，文本为8，采用或运算，得出节点类型数据9，可以看到上图中节点的为9，采用&运算
2024-07-09 15:39:24
584
原创 vue3源码（六）渲染原理-runtime-dom
项目入口文件文件位置保证了render的中主要调用了创建返回的App，中返回核心方法主要包含了创建渲染器和更新和渲染的一系列方法，接下来开始从使用到实现吧~
2024-07-02 12:23:03
405
原创 vue3源码（五）ref、toRef、toRefs、proxyRefs
实现使用类实现，在方法中收集，在时触发收集到的2.toRef功能 函数可以将一个响应式对象的属性转换为一个独立的 对象。返回的是一个指向源对象属性的 引用，任何对该引用的修改都会同步到源对象属性上。使用 时需要传入源对象和属性名作为参数。首先定义一个对象，将对象进行结构赋值重组后,得到的对应不再具有响应式特性使用转换对象中的某个属性，返回一个toRefs功能 函数可以将一个响应式对象转换为一个普通的对象，该对象的每个属性都是独立的 对象。返回的对象可以进行解构，每个属
2024-06-23 14:23:16
402
原创 backspace按键导致页面回退
键，就会直接回退到是一个页面,尤其是在pc端页面有弹框的时候如果操作按到backspace导致页面回退,造成数据丢失等一系列体验问题。之前的浏览器，当焦点不在一个可编辑的元素上时，按。用户在录入资料时一不小心错按。键就会回退到上一个页面，按。键则会前进到下一个页面。以后的浏览器则屏蔽了。的上述行为，而是采用。
2024-05-24 17:04:55
359
原创 vue3源码（四）watch和watchEffect
侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。函数或对象或数组都转化为。函数形式，回调方法相当于。
2024-01-30 16:48:17
474
原创 vue3源码（三）computed
默认不执行，在取值时执行，具有缓存功能，数据不变多次取值只触发一次取值计算。此时已经简单实现了computed，以下情况我们修改了。，直接取缓存的值，依赖的属性发生变化后，，当计算属性依赖的属性变化后，不仅修改。调整effect.ts文件，抽出来方法。，用来判断是否需要重新执行。的返回值返回一个不可变的响应式。，需要执行，计算取值后，缓存结果，重新渲染页面，但是并未执行。的值，理论上应该执行。，同时让计算属性收集。
2024-01-30 10:01:46
1554
原创 vue3源码（二）reactive&effect
reactive方法会将对象变成proxy对象，effect中使用reactive对象时会进行依赖收集，稍后属性变化时会重新执行effect函数。
2024-01-24 17:05:43
788
原创 vue3源码（一）搭建开发环境
是管理项目代码的一个方式，指在一个项目仓库(repo)中管理多个模块/包(package)vue3源码采用Monorepo管理项目。
2024-01-22 16:58:16
621
原创 threejs (二) 相机
创建相机辅助线创建一个透视相机观察正交相机上面的可以配置设置对象的属性：可以是number和boolean类型和方法类型，点击gui插件方法名称时，会执行改方法。
2023-11-07 17:29:22
757
原创 threejs (一) 创建一个正方体
通过THREE.Scene创建一个场景：3D世界的容器，所有的对象都要放到这个场景中，包括背景等。Geometry：几何体，常见的内置几何体有PlaneGeometry：平面几何体BoxGeometry：立方几何体
2023-10-20 17:46:59
457
原创 webpack（五）热更新
是指当我们对代码修改并保存后，webpack将会对代码进行重新打包，并将新的模块发送到浏览器端，浏览器用新的模块替换掉旧的模块 ，以实现在不刷新浏览器的前提下更新页面。例如，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会丢失如果使用的是HMR，就可以实现只将修改的模块实时替换至应用中，不必完全刷新整个应用。...,hot:true配置完成之后我们修改css文件，确实能够以不刷新的形式更新到页面中，但是当我们修改保存js。
2023-10-20 14:22:58
594
原创 webpack（四）plugin
本质是一个具有方法的对象方法会被调用，并且在整个编译生命周期都可以访问对象 的 方法的第一个参数，应是驼峰式命名的插件名称生命周期：构建时，清除dist包测试，在中添加一个文件，重新运行打包命令，消失构建时，帮助我们自动创建一个文件,并把打包生成的 模块引⼊到该 中测试，创建文件，添加一些内容，打包后在中生成文件会包含文件中的内容给我们自定义模板中填充数据，定义常亮填充数据使用内置插件babel-loaderbabel原理为什么需要:开发时写了等，需要转换为浏览器可以识别的安装核心：
2023-09-06 20:00:25
346
原创 webpack（三）loader
loader用于对模块的源代码进行转换，在imporrt或加载模块时预处理文件webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定文件中。在webpack内部，任何文件都是模块，不仅仅是js文件默认情况下，遇到import或者require加载模块时，webpack只支持对js和json文件的打包，像等这些类型的文件，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析。当webpack碰到不识别的模块的时候，webpack。
2023-09-01 18:00:25
450
原创 webpack（二）webpack介绍与基础配置
webpack最初的目标是实现前端项目模块化，旨在更高效的管理和维护项目中的每一个资源。可以看做是模块打包机，分析你的项目结构，找到javascript模块以及其它一些浏览器不能直接运行的拓展语言（等），并将其打包为合适的格式以供浏览器使用。
2023-09-01 09:29:25
537
原创 webpack（一）模块化
CommonJs是运行在node.js环境下的模块化规范，node的机制是在启动时，加载模块，执行时直接使用模块一个文件就是一个模块，每个模块都有单独的作用域通过导出，通过require函数导入浏览器在加载页面是，如果需要同步加载所有模块，必然导致性能低下，所以早期的浏览器没有使用CommonJS规范AMD主要用于浏览器端，通过define定义，通过require导入，异步加载模块CMD。
2023-08-29 14:15:46
957
原创 学习ts（十二）Proxy与Reflect
方法，用于让一个对象变为不可扩展。它返回一个布尔值，表示是否操作成功。用于设置目标对象的原型（prototype）,对应。，用于得到指定属性的描述对象，将来会替代掉后者。,用来为对象定义属性，未来，后者会被逐渐替代。，返回一个布尔值，表示当前对象是否可扩展。方法用于返回对象的所有属性，基本等同于。操作，返回一个boolean值。对象属性的设置，返回一个布尔值。，这提供了一种不使用。来调用构造函数的方法。值，表示是否设置成功。
2023-08-28 11:15:02
694
原创 学习ts（十）装饰器
装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上，是一种在不改变原类和使用继承的情况下，动态的扩展对象功能。装饰器使用形式，其中expression必须评估为一个函数，该函数将在运行时调用，并带有有关装饰声明的信息。
2023-08-25 15:06:58
233
原创 学习ts（八）模块与命名空间
ts与es5一样，任何包含顶级import和export的文件都被当成一个模块。相反的，如果一个文件不带有顶级的import和export声明，那么他的内容被视为全局可见的。在两个文件中声明相同属性名的变量，会出现错误信息可以使用区分模块，在其余模块使用时通过import关键字引入。
2023-08-24 16:13:42
231
原创 学习ts（七）泛型
泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型，在实例化时作为参数指明这些类型。在ts中，定义函数、接口或类的时候，不预先定义好具体的类型，而在使用的时候在指定类型的一种特性。例子：我们要实现一个类似echo的函数，输入什么就输出什么，需要确保输入和输出的类型相同，并且支持多个类型可以自动添加类型也可以指定类型。
2023-08-24 10:35:19
214
原创 学习ts（六）数据类型（元组、枚举、Symbol、never）与类型推论
元组（Tuple）是固定数量的不同类型的元素的组合。是数组的变种。元组与集合的不同之处在于，元组中的元素类型可以是不同的，而且数量固定。元组的好处在于可以把多个元素作为一个单元传递。如果一个方法需要返回多个值，可以把这多个值作为元组返回，而不需要创建额外的类来表示。
2023-08-22 16:03:07
460
原创 学习ts（五）类
是面向对象程序设计（OOP）实现信息封装的基础类是一种用户定义的引用数据类型，也称类类型JavaScript的class,虽然本质是构造函数，但是使用起来已经方便了许多，js中没有加入修饰符和抽象类等特性ts的class支持面向对象的所有特性，比如类，接口等。
2023-08-21 16:45:01
245
原创 学习ts（四）联合类型、交叉类型、类型断言
在这种情况下，由于type可能是a也可能是b，不一定存在sex属性，所以可以加一个类型判断，是b的时候返回sex属性。一般用来将后面的表达式强制转换为布尔类型的数据（boolean），也就是只能是true或者false。隐式转换：a = “1234” - 0 //转换为数字 b = 1234 + “” //转换为字符串。如果是引用类型，const定义的是可以修改其中的值的，但是as const 是不可修改的。对于字面量的断言，与与const直接定义常量是有区别的。
2023-08-17 14:50:55
229
原创 学习ts（三）函数
/ 定义函数 参数类型直接写在括号中，函数返回值类型写在括号后面// 箭头函数// 函数默认值// 可选参数b : 0)// ts中可以定义this的类型，必须是第一个参数定义this类型obj.add(4)
2023-08-17 08:49:57
135
原创 前端跨域解决方案
同源指的是两个URL的协议、域名、端口号一致，反之则是跨域。出现跨域的根本原因：浏览器的同源策略不允许非同源的URL之间进行资源的交互。
2023-07-28 20:07:18
304
原创 接口并发请求控制
Gmail开发人员发现IE里面有个对象来请求数据时，，所以使用这个特性，进行网络数据请求，这就是AJAX的由来。AJAX不是一个单词，他的全称是，就是异步的JavaScript和XML，它是一套用于创建快速动态网页的技术标准，使用步骤如下：创建异步对象设置请求参数，包括请求的方法和URL等发送请求注册事件，事件状态变更会及时响应监听在监听里面获取并处理返回数据所以AJAX的核心就是。
2023-07-27 17:45:39
979
原创 观察者模式、中介者模式和发布订阅模式
在这个星型结构中，同事对象不再直接与其他的同事对象联系，通过中介者对象与另一个对象发生相互作用，中介者对象的存在保证了结构上的稳定，也就是说，系统的结构不会因为新对象的引入带来大量的修改工作。如果一个系统中对象之间存在多对多的相互关系，可以将对象之间的一些交互行为从各个对象之间分离出来，并集中封装在一个中介者对象中，由中介者进行统一的协调，这样对象之间多对多的复杂关系就转变为相对简单的一对多关系，通过引入中介者来简化对象之间的复杂交互。
2023-07-25 14:49:06
848
原创 设计模式-工厂模式
工厂模式是用来创建对象的一种最常用的设计模式，不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，那么这个函数就可以被视为一个工厂其就像工厂一样重复的产生类似的产品，工厂模式只需要我们传入正确的参数，就能生产类似的产品再比如：一个产品 调用数据库，根据量级或者需求等不同的因素，我们需要让产品切换调用到不同的数据库中 oracle sqlserver mysql -> DB层，根据逻辑或者标识，能切换连接的数据库。
2023-07-25 11:16:56
217
原创 单例模式与构造器模式
单例模式（Singleton Pattern）：创建型模式，提供了一种创建对象的最佳方式，这种模式涉及到一个单一的类，该类负责创建自己的对象，同时确保只有单个对象被创建。在应用程序运行期间，单例模式只会在全局作用域下创建一次实例对象，让所有需要调用的地方都共享这一单例对象。实现模块之间的独立划分「但是也可以实现模块之间方法的相互调用」
2023-07-25 09:35:45
1432
原创 从输入URL到页面呈现
客户端与服务器建立好连接通道之后，客户端把数据传递给服务器，开始发送释放tcp的操作服务器拿到标识后返回给客户端信息 回馈、准备数据给客户端的数据，由于准备数据的时间比较长，所以分两次传递回去。虽然增加了dns解析的时间，但是实现了资源合理利用：每个服务器承受的压力不同，服务器分布式、服务器集群共享，高可用高并发。协商缓存就是强制缓存失效后，浏览器携带缓存表示向服务器发起请求，由服务器根据缓存表示决定是否使用缓存的过程。dns也是有缓存的，如果之前解析过，会在本地有缓存（不一定，有周期会消失）
2023-07-17 11:41:57
236
1
原创 js（七）this
当函数引用有上下文对象时，隐式绑定规则会把函数中的this绑定到这个上下文对象。默认绑定：独立函数调用，可以把默认绑定看作是无法应用其他规则时的默认规则，this指向全局对象。这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。this执行主体，谁把它执行的「和在哪创建&在哪执行都没有必然的关系」拿不到，所以判断如果传入的this上下文不是对象，转为对象。可以有多个参数，剩余参数被认为是传递给方法的参数。的唯一区别是参数，第一个参数都是要绑定的上下文。
2023-07-14 16:14:03
321
原创 js （一）数据类型与判断
typeof null "object" 对象存储在计算机中，都是以000开始的二进制存储，null也是，所以检测出来的结果是对象 实际上不是对象，可以理解为浏览器的一个bug js会把null理解为一个空对象引用
2023-07-12 18:01:08
177
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人