- 博客(68)
- 收藏
- 关注
RSS订阅原创 vue3中的watch侦听器
在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改DOM，或是根据异步操作的结果去修改另一处的状态。在组合式API中，我们可以使用watch函数在每次响应式状态发生变化时触发回调函数。watch函数可以侦听被ref和reactive包裹的数据。
2024-05-14 13:22:01
669
原创 vue3中的computed
computed计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改；如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。
2024-05-13 09:00:52
414
原创 vue3中的toRef、toRefs和toRaw
toRef的作用是将一个响应式对象中的属性转换成单独的响应式引用。转换后的响应式引用会跟踪原始属性的变化。转换后的响应式可以被用于计算属性及监听器中。如果原始对象是非响应式的则不会更新视图，数据会改变。
2024-05-13 09:00:03
132
原创 vue3中的reactive、readonly和shallowReactive
readonly：拷贝一份proxy对象将其设置为只读。使用readonly时， 变量里的属性不可改变。当原本数据改变时，使用了readonly函数的值也会发生改变。在这个例子中，修改响应式对象中的age属性，readonly中的age属性也会随之更改。
2024-04-28 10:48:13
638
原创 vue3中的ref、isRef、shallowRef、triggerRef和customRef
接受一个参数值并返回一个响应式且可改变的ref对象。ref对象拥有一个指向内部值的单一属性，指向内部值。例：此时，页面上的str1也跟着变化使用ref获取dom。
2024-04-24 14:28:30
821
原创 nvm安装nodejs版本报错Could not retrieve https://npm.taobao.org/mirrors/node/latest/SHASUMS256.txt.
淘宝镜像源原本域名过期了，需要更换为最新的。
2024-04-24 14:28:02
287
原创 uni-app：App.vue中onLaunch请求接口异步，首页onLoad获取不到数据
最近在开发uniapp的h5项目，按着正常的逻辑来说启动h5页面，先触发App.vue中的onLaunch生命周期，随后触发onLoad。但其实不是，在触发onLaunch的同时也在触发要进入页面的onLoad，所以导致在onLoad里面拿不到onLaunch里的数据。
2024-04-22 08:44:04
355
原创 TypeScript23：TS中预设的类型演算
源码中加上了 "?" ，代表可选： 成员为可选成员情况下： 后面加了个 "-?" 代表去掉可选源码中加了 readonly 关键字：源码中通过判断类型 T 中不继承于 U 的类型：
2024-04-19 08:36:16
570
原创 TypeScript22：三个关键字typeof、keyof 、in
TS中的typeof，书写的位置在类型约束的位置上，表示获取某个数据的类型。让b这个变量保持与a的类型一致。当typeof作用于类的时候，得到的类型，是该类的构造函数。将参数或者变量约束为构造函数时可以这样写：这里的代表的是类本身，而不是类的构造函数。
2024-04-18 09:30:53
484
原创 TypeScript21：装饰器
装饰器，能够带来额外的信息量，可以达到分离关注点的目的。上述两个问题产生的根源：某些信息，在定义时，能够附加的信息量有限。为某些属性、类、参数、方法提供元数据信息( metadata )。描述数据的数据。
2024-04-18 09:30:41
610
原创 TypeScript20：this指向约束
明确：大部分时候，this的指向取决于函数的调用方式。如果直接调用函数(全局调用)， this 指向全局对象或 undefined (启用严格模式)；如果使用对象.方法调用， this 指向对象本身；如果是 dom 事件的处理函数， this 指向事件处理对象。
2024-04-16 08:39:27
334
原创 TypeScript19：索引器
索引器：对象[值]，使用成员表达式。如果想要开启严格的类型检查，需要在 ts.config.js 文件中进行配置：将 noImplicitAny 设置为 true，开启对隐式any 的类型检查。
2024-04-16 08:39:13
290
原创 TypeScript18：interface接口进阶
举个例子：有一个马戏团，马戏团中有很多动物，包括：狮子、老虎、猴子、狗。这些动物都具有共同的特征：名字、年龄、种类名称；还包含一个共同的方法：打招呼。它们各自有各自的技能，技能是可以通过训练改变的。狮子和老虎能进行火圈表演，猴子能进行平衡表演，狗能进行智慧表演。马戏团中有以下常见的技能：（2）建立子类，继承父类。（3）设计狮子、老虎类。（4）设计猴子类。（5）设计狗类。（6）传统调用 不适用接口实现时：系统中缺少对能力的定义 - 接口。面向对象领域中
2024-04-15 08:46:59
366
原创 TypeScript17：静态成员
静态成员是指，附着在类上的成员（属于某个构造函数的成员）使用static修饰的成员是静态成员，可以直接用类名调用。对象成员，属于某个类的对象；非实例成员，属于某个类。上面代码中，User作为一个用户类，每新建一个用户需要通过new方法来创建。新建的用户需要在类内部保存到数组中， 以便登陆时通过login来校验账户和密码，这时的users应为一个静态成员。如果为一个实例成员，则会导致每创建一个用户，users的值都会发生变化，无法进行登录校验。
2024-04-15 08:46:39
181
原创 TypeScript16：抽象类
有时，某个类只表示一个抽象概念，主要用于提取子类共有的成员，而不能直接创建它的对象。该类可以作为抽象类。给类前面加上abstract，表示该类是一个抽象类，不可以创建一个抽象类。
2024-03-12 10:24:18
363
原创 TypeScript14：面向对象概述
面向对象：Oriented（基于）Object（事物），简称OO。是一种编程思想，它提出一切以对象为切入点思考问题。面向过程函数式编程。一功能流程为思考切入点，不太适合大型应用。以数学运算为思考切入点。以划分类为思考切入点。类是最小的功能单元。可以产生对象的模板。
2024-03-07 08:50:31
250
原创 TypeScript13：泛型
在函数名之后写上 ：为函数指定一个泛型，名称为 T ，调用函数时传递一个 number 类型，则 T 为 number 类型，可以作为函数参数、函数返回值、和函数里面数值类型使用。下方示例中，为 T 指定了默认类型为 number 。
2024-03-05 15:34:06
506
原创 TypeScript11：类型兼容性
B -> A，将 B 赋值给 A ，如果能完成赋值，则 B 和 A 类型兼容。目标类型需要某一些特征，赋值的类型只要能满足该特征即可。
2024-03-04 09:47:00
325
原创 TypeScript10：readonly修饰符
只读修饰符：修饰的目标是只读的，不在编译结果中。1.接口或者类型别名中使用readonly 修饰符2.数组中使用 readonly 修饰符
2024-03-04 09:46:41
368
原创 TypeScript09：接口interface
TypeScript的接口：用于约束类、对象、函数的契约（标准）。与类型别名一样，接口不会出现在编译结果中。
2024-03-03 09:30:41
565
原创 TypeScript08：在TS中使用模块化
注意：在导入模块时不要加后缀名。因为后缀名会编译到结果中，编译结果找不到 .ts 文件会报错。结果：没有区别。 结果：导出的声明会变成 exports 的属性，默认的导出会变成 exports 的 default 属性。导入时，会将整个对象拿到取属性值。 "ues strict" 为 js 中的严格模式，由于 ts 已经足够严格，因此可以通过配置 "noImplicitUseStrict": true 移除编译结果中的严格模式 "ues strict
2024-03-01 11:31:18
1101
原创 TypeScript07：枚举enum
扩展类型：类型别名、枚举、接口、类。枚举：通常用于约束某个变量的取值范围。字面量和联合类型配合使用，也可以达到同样的目标。在类型约束位置，会产生重复代码。可以使用类型别名解决该问题；逻辑含义和真实的值产生了混淆，会导致当修改真实值的时候，产生大量的修改；字面量类型，不会进入编译结果。
2024-03-01 08:36:12
554
原创 TypeScript06：函数的相关约束
函数重载：在函数实现之前，对函数调用的多种情况进行声明。可选参数：可以在某些参数名后加上问号，表示该参数可以不用传递。不传递时默认为undefined类型。可选参数必须在参数的末尾位置。
2024-02-29 08:51:40
274
原创 TypeScript04：其他常用类型
多种类型任选其一，配合类型保护进行判断。当对某个变量进行类型判断之后，在判断的语句块中便可以确定它的确切类型， typeof可以触发基本类型的类型保护。
2024-02-28 16:20:43
329
原创 TypeScript03：基本类型
由于 null 和 undefined 是所有其它类型的子类型，所以需要在 tsconfig.json 文件中配置严格检查，否则容易引发报错。通过添加 "strictNullChecks":true，可以获得更严格的空类型检查， null 和 undifined 只能赋值给自身。
2024-02-28 16:20:17
197
原创 TypeScript01：TypeScript的安装和配置
在 node 环境中搭建 TS 开发环境。使用 tsc 命令对 .ts 文件进行编译，输出 .js 文件，这个 .js 文件是我们需要运行的文件。
2024-02-21 11:36:46
384
原创 前端工程化之：webpack4-2(babel预设+babel插件+webpack中运行)
babel有多种预设，最常见的预设是。可以让你使用最新的JS语法，而无需针对每种语法转换设置具体的插件。
2024-02-21 08:56:16
1697
原创 前端工程化之：webpack4-1(babel的安装和使用)
babel一词来自于希伯来语，直译为巴别塔。巴别塔象征的统一的国度、统一的语言而今天的JS世界缺少一座巴别塔，不同版本的浏览器能识别的ES标准并不相同，就导致了开发者面对不同版本的浏览器要使用不同的语言，和古巴比伦一样，前端开发也面临着这样的困境。babel的出现，就是用于解决这样的问题，它是一个编译器，可以把不同标准书写的语言，编译为统一的、能被各种浏览器识别的语言。由于语言的转换工作灵活多样，babel的做法和差不多，它本身仅提供一些分析功能，真正的转换需要依托于插件完成。
2024-02-20 09:12:35
650
原创 前端工程化之：webpack3-8(抽离css文件)
目前， css 代码被 css-loader 转换后，交给的是 style-loader 进行处理。style-loader 使用的方式是用一段 js 代码，将样式加入到 style 元素中。而实际的开发中，我们往往希望依赖的样式最终形成一个 css 文件此时，就需要用到一个库： mini-css-extract-plugin 。该库提供了1个 plugin 和1个 loader 。
2024-02-20 09:12:12
255
原创 前端工程化之：webpack3-7(PostCss)
可以看出，CSS工程化面临着诸多问题，而解决这些问题的方案多种多样。如果把CSS单独拎出来看，光是样式本身，就有很多事情要处理。既然有这么多事情要处理，何不把这些事情集中到一起统一处理呢？PostCss就是基于这样的理念出现的。PostCss类似于一个编译器，可以将样式源码编译成最终的CSS代码。看上去是不是和LESS、SASS一样呢？但PostCss和LESS、SASS。
2024-02-19 08:33:32
1240
原创 前端工程化之：webpack3-6(css预编译器less)
编写css时，受限于css语言本身，常常难以处理一些问题：由于官方迟迟不对css语言本身做出改进，一些第三方机构开始想办法来解决这些问题，其中一种方案，便是。预编译器的原理很简单，即使用一种更加优雅的方式来书写样式代码，通过一个编译器，将其转换为可被浏览器识别的传统css代码。目前，最流行的预编译器有less和sass。
2024-02-19 08:31:40
293
原创 前端工程化之：webpack3-5(css module)
通过命名规范来限制类名太过死板，而 css in js 虽然足够灵活，但是书写不便。css module 开辟一种全新的思路来解决类名冲突的问题。
2024-02-06 10:43:34
1453
原创 前端工程化之：webpack3-4(css in js)
css in js 的核心思想是：用一个 JS 对象来描述样式，而不是 css 样式表。例如下面的对象就是一个用于描述样式的对象：
2024-02-06 10:42:16
164
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人