- 博客(66)
- 收藏
- 关注
原创 javascript异步进阶
三种状态,状态的表现和变化then和catch对状态的影响(重要)then和catch的链式调用(常考)用同步的方式,编写异步。reject(new Error(`图片加载失败${reject(new Error(` 图片加载失败 ${ src } `)) } img . src = src }) return promise } async function loadImg1() {// 注意:await 必须放在 async 函数中,否则会报错 try {
2024-08-06 13:43:53 790
原创 http相关
初次请求,返回资源和cache-control,再次请求直接使用本地资源。Etag资源的唯一标识(一个字符串,类似人体的指纹)如果资源被重复生成,而内容不变,则Etag更精确。在Respongse Headers中,有两种。Last-modified资源的最后修改时间。Last- Modified只能精确到秒级。两者共存会优先使用Etag。
2024-08-04 23:15:39 502
原创 React Hooks
useState(0)传入初始值,返回数组[state, setState]通过state获取值通过setState(1)修改useEffect依赖[],组件销毁时执行fn,等于WillUnMountuseEffect无依赖或依赖[a, b],组件更新时执行fn即,下一次执行useEffect之前,就会执行fn,无论更新或卸载React默认会更新所有子组件class组件使用SCU和PureComponent做优化Hooks中使用useMemo,但优化的原理是相同的。
2024-08-04 12:44:07 803
原创 React原理
React.creatElement即h函数,返回vnode第一个参数,可能是组件,也可能是html tag组件名首字母必须大写(React规定)
2024-08-03 15:53:19 781
原创 React高级特性
SCU默认返回true,即React默认重新渲染所有子组件必须配合“不可变值”一起使用可先不用SCU,有性能问题时再考虑使用。
2024-08-01 17:37:26 832
原创 React组件生命周期
类组件有明确的生命周期方法,用于在组件的不同阶段执行特定操作。函数组件使用 Hooks (useEffect) 来处理副作用,模拟类组件的生命周期方法。useEffect 可以根据依赖数组来决定副作用的执行时机(挂载、更新、卸载)。但组件生命周期父子组件生命周期,和Vue的一样。
2024-07-31 17:01:26 771
原创 关于React的setState
在setState之前不能修改state的值,不要直接修改state,使用不可变值。state必须在构造函数中定义。
2024-07-30 21:04:15 239
原创 webpack5
启动本地服务在dev中添加配置在package.json script中添加命令处理ES6使用babel-loader处理样式处理图片开发环境:生产环境模块化高级配置多入口抽离CSS文件抽离公共代码懒加载引用动态数据处理JSX.babelrcwebpack.config.js–
2024-07-28 19:27:41 333
原创 前端为何要进行打包和构建
代码层面体积更小(tree-shaking、压缩、合并),加载更快编译高级语言或者语法(TS、ES6+、模块化、scss)兼容性和错误检查(polyfill、postcss、eslint)研发层面统一、高效的开发环境统一的构建流程和产出标准集成公司构建规范(提测、上线)
2024-07-27 17:13:25 344
原创 webpack性能优化
babel7.4之后弃用babel-polyfill,推荐直接使用corejs和regenerator。在webpack5中,使用thread-loader替代happypack。所以需要使用regenerator这个库来支持generator语法。实际在我们开发环境中都是使用devServer,其中已经默认设置。DllReferencePlugin - 使用dll文件。同一个版本只构建一次即可,不用每次都重新构建。前端框架vue react,体积大,构建慢。DllPlugin - 打包出dll文件。
2024-07-27 15:45:33 1003
原创 module chunk bundle的区别
chunk - 多模板合并成的,如entry import() splitChunk。module - 各源码文件,webpack中一切皆模块。bundle - 最终的输出文件。
2024-07-25 13:55:03 108
原创 TS中有哪些特殊符号,分别是什么意思
这里age为可选项,创建u这个变量不填age属性不会报错,这里的age类型就是 number | undefined。
2024-07-23 22:29:49 318
原创 如何理解TS中的泛型
泛型的使用可以穿入任何类型,包括interface和type可以当作任何类型来使用可自定义扩展泛型的属性泛型Generics,是为了通用型和扩展性泛型定义:函数class interface type泛型的使用:穿入任何类型,当作任何类型,扩展其他属性
2024-07-23 20:29:25 102
原创 typescript中type和interface有什么区别,如何选择?
【代码】typescript中type和interface有什么区别,如何选择?
2024-07-23 18:15:45 196
原创 Composition API和React Hooks对比
前者setup只会被调用一次,而后者函数会被多次调用前者无需useMemo useCallback,因为setup只会调用一次前者无需顾虑调用顺序,而后者需要保证hooks的顺序一致前者reactive+ref比后者useState,要难理解
2024-07-22 16:39:49 94
原创 为何Vue3比Vue2快
从编译结果代码可以看出,如果该事件方法已被定义则直接去缓存中的方法,没有则定义。静态字段将不再比较,这样diff算法将少比较很多节点。编译时,根据不同的情况,引入不同的API。
2024-07-22 15:36:08 527
原创 Vue3如何实现响应式
Proxy能规避Object.defineProperty的问题,但是无法兼容所有浏览器,无法polyfill。废话不多说,直接上代码。
2024-07-21 22:37:51 342
原创 Vue3升级了哪些重要的功能
在vue2.x中必须有根节点,按vue3.x这种写法会直接报错。vue3.x中会自动创建fragment,类似react的<></>。可以帮我控制显示和隐藏,在组件加载时显示fallback插槽内容。
2024-07-21 18:03:20 418
原创 Composition API对比Options API
Composition API带来了什么?更好代码组织更好的逻辑复用更好的类型推导如何选择不建议共用,会引起混乱小型项目、业务逻辑简单,用Options API中大型项目、逻辑复杂,用Composition API
2024-07-21 13:25:43 90
原创 vue常见的性能优化方式
合理使用v-show和v-if合理使用computedv-for时加key,以及避免同时使用v-for和v-if自定义事件、DOM事件及时销毁合理使用异步组件合理使用keep-alivedata层级不要太深使用vue-loader在开发环境做模板编译(预编译)webpack层面的优化前端通用的性能优化,如图片懒加载使用SSR
2024-07-21 09:27:21 107
原创 vue的三大核心知识点
响应式: 监听data属性getter setter(包括数组)模板编译: 模板到render函数再到vnodevdom: patch(elem, vnode)和patch(vnode, newVnode)
2024-07-20 16:33:47 173
原创 vue2高级特性
只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。有如下场景,需要渲染一个新闻页面,包括图片、文字等内容时,怎么渲染?当不确定渲染的是什么组件时,就需要用到动态组件了。当组件渲染的时候, 将会被替换为“Your Profile”。3、v-model的实现原理。
2024-07-19 12:15:19 458
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人