- 博客(23)
- 收藏
- 关注
RSS订阅原创 Git的规范
style -代码格式(不影响代码运行的变动)refactor-重构、优化(既不增加新功能，也不是修复bug)bugchore-构建过程或辅助工具的变动。featurefix -修复。perfa-性能优化。
2024-12-12 14:57:25
178
原创 说说React服务端渲染怎么做？原理是什么？
但是像一些事件处理的方法，是无法在服务端完成，因此需要将组件代码在浏览器中再执行一遍，这种服务器端和客户端共用一套代码的方式就称之为。浏览器开始进行渲染和节点对比，然后执行完成组件内事件绑定和一些交互，浏览器重用了服务端输出的。结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。路径，然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为。文件，用于监听3000端口的请求，当请求根目录时，返回。上面的过程中，已经能够成功将组件渲染到了页面上。
2024-11-29 09:27:29
1962
原创 说说React Jsx转换成真实DOM过程？
在react源码中，虚拟Dom转化成真实Dom整体流程如下图所示：使用React.createElement或JSX编写React组件，实际上所有的 JSX 代码最后都会转换成React.createElement(...) ，Babel帮助我们完成了这个转换的过程。createElement函数对key和ref等特殊的props进行处理，并获取defaultProps对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟DOM对象。
2024-11-29 09:25:23
401
原创 super() 和 super(props) 有什么区别？
在React中，类组件基于ES6，所以在中必须使用super在调用super过程，无论是否传入propsReact内部都会将porps赋值给组件实例porps属性中如果只调用了super()，那么this.props在super()和构造函数结束之间仍是undefined。
2024-11-21 09:17:42
540
原创 说说 Real DOM 和 Virtual DOM 的区别？优缺点？
性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能。请求后，并不知道后续还有 9 次更新操作，因此会马上执行流程，最终执行 10 次流程。，意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实。跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行。第二个参数是个对象，里面存着标签的一些属性，例如 id、class 等。节点，浏览器没这么智能，收到第一个更新。执行，返回值是一个对象，也就是虚拟。
2024-11-21 09:15:48
758
原创 Javascript中如何实现函数缓存？函数缓存有哪些应用场景？
下面再看看如何实现函数缓存，实现原理也很简单，把参数和对应的结果数据存在一个对象中，调用时判断参数对应的数据是否存在，存在就返回对应的结果数据，否则就返回计算结果。虽然使用缓存效率是非常高的，但并不是所有场景都适用，因此千万不要极端的将所有函数都添加缓存。缓存只是一个临时的数据存储，它保存数据，以便将来对该数据的请求能够更快地得到处理。把接受多个参数的函数转换成接受一个单一参数的函数。通过接收其他函数作为参数或返回其他函数的函数。函数缓存，就是将函数运算过的结果进行缓存。，这两个组合在⼀起就形成了闭包。
2024-11-09 09:41:41
807
原创 JavaScript中执行上下文和执行栈是什么？
引擎会执行位于执行栈栈顶的执行上下文(一般是函数执行上下文)，当该函数执行结束后，对应的执行上下文就会被弹出，然后控制流程到达执行栈的下一个执行上下文。可以有任意多个函数上下文，每次调用函数创建一个新的上下文，会创建一个私有作用域，函数内部声明的任何变量都不能在当前函数作用域外部直接访问。执行栈，也叫调用栈，具有 LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。每当引擎碰到一个函数的时候，它就会创建一个函数执行上下文，然后将这个执行上下文压到执行栈中。
2024-11-09 09:38:38
853
原创 谈谈this对象的理解？
函数的this关键字在JavaScript中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别在绝大多数情况下，函数的调用方式决定了this的值（运行时绑定）this关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用，总指向调用它的对象举个例子：解释function baz() { // 当前调用栈是：baz // 因此，当前调用位置是全局作用域 console.log( "baz" );bar();
2024-11-04 15:07:04
974
原创 Javascript如何实现继承？
下面以一张图作为总结：通过来划分不同的继承方式，最后的寄生式组合继承方式是通过组合继承改造之后的最优继承方式，而extends的语法糖和寄生组合继承的方式基本类似。
2024-11-04 15:03:38
1026
原创 说说Vue 3.0中Treeshaking特性？举例说明一下？
如果把代码打包比作制作蛋糕，传统的方式是把鸡蛋（带壳）全部丢进去搅拌，然后放入烤箱，最后把（没有用的）蛋壳全部挑选并剔除出去。实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到。模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量。是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫。中，无论我们使用什么功能，它们最终都会出现在生产代码中。简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码。再一次打包，发现打包出来的体积并没有变化。
2024-10-31 09:20:35
449
原创 Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？
只能遍历对象属性进行劫持解释Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的解释。
2024-10-30 09:12:52
1011
原创 vue项目本地开发完成后部署到服务器后报404是什么原因呢？
是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个。什么自动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不展开。前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的。这是一个经典的问题，相信很多同学都有遇到过，那么你知道其真正的原因吗？产生问题的本质是因为我们的路由是通过JS来执行视图切换的，是没有相关配置的，所以就会出现 404 的情况。
2024-10-30 09:10:17
923
原创 vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？
取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过。菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识。路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转。按需挂载，路由就需要知道用户的路由权限，也就是在用户登录进来的时候就要知道当前用户拥有哪些路由权限。如果有嵌套路由，后端功能设计的时候，要注意添加相应的字段，前端拿到数据也要做相应的处理。
2024-10-29 10:48:55
1159
原创 axios如何进行封装？
大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，这里将普适性的请求头作为基础配置。当需要特殊请求头时，将特殊请求头作为参数传入，覆盖基础配置。请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍。封装的同时，你需要和 后端协商好一些约定，请求头，状态码，请求超时时间.......如果每个页面都发送类似的请求，都要写一堆的配置与错误处理，就显得过于繁琐了。请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问。
2024-10-29 10:45:46
1940
原创 Vue项目中你是如何解决跨域的呢？
代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。一定要注意跨域是浏览器的限制，你用抓包工具抓取接口数据，是可以看到接口已经把数据返回回来了，只是浏览器的限制，你获取不到数据。发送请求中，配置请求的根路径。
2024-10-28 09:41:42
1979
原创 vue3有了解过吗？能说说跟vue2的区别吗？
关于vue3的重构背景，尤大是这样说的：「Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」利用新的语言特性(es6)解决架构问题。
2024-10-25 11:26:17
870
原创 大文件上传问题解答
客户端负责切片，通常在文件选择后或用户点击“上传”按钮时进行。每个切片包含文件标识符、切片编号、切片数据、切片大小、文件总大小、文件名和校验码等信息。客户端通过HTTP POST请求将切片数据发送到服务器，并在请求头中包含切片信息。服务器通过文件标识符确定切片属于哪个文件。服务器负责合并切片，当接收到所有切片并验证完整性后进行合并。客户端通过查询服务器已接收的切片信息，跳过已上传的切片，实现续传功能。通过这些步骤，可以有效地处理大文件上传过程中的切片、传输、合并和续传问题。
2024-10-25 11:21:24
894
原创 你有写过自定义指令吗？自定义指令的应用场景有哪些？
开始之前我们先学习一下指令系统这个词指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能除了核心功能默认内置的指令 (v-model和v-show)，Vue也允许注册自定义指令指令使用的几种方式：解释。
2024-10-25 08:31:16
609
原创 Vue中的$nextTick有什么作用？
在修改数据之后立即使用这个方法，获取更新后的 DOM。将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。等待同一事件循环中的所有数据变化完成之后，会将队列中的事件拿来进行处理，进行。每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图)，有了。如果我们一直修改相同数据，异步操作队列还会进行去重。，而是将修改数据的操作放在了一个异步操作队列中。如果想要在修改数据后立刻得到更新后的。节点，却发现获取到的是旧值。机制，只需要更新一次，所以。数据在发现变化的时候，
2024-10-23 09:34:09
819
原创 vue中组件通信的方式
6）attrs 与 listeners。2）通过 $emit 触发自定义事件。7）Provide 与 Inject。5）$parent 或$root。1）通过props来传递。9）使用v-model。10）使用pinia。
2024-10-21 15:04:23
171
1
原创 Vue3.0性能提升主要是通过哪几方面体现的？
这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用。中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用。，静态标记值为 -1 ，特殊标志是负整数表示永远不会用于 Diff。等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小。来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加。整体体积变小了，除了移出一些不常用的API，再重要的是。实例，它会在组件渲染的过程中把用到的数据。，就不需要创建对象，然后根据对象渲染。
2024-10-21 11:42:03
654
原创 vue和react的区别
数据流向的不同。react从诞生开始就推崇单向数据流，而Vue是双向数据流 数据的语法不同。react采用jsx语法，而vue采用的是模版语法template。 数据变化的实现原理不同。react使用的是不可变数据，而Vue使用的是可变的数据 组件化通信的不同。react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数 diff算法不同。react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue使用双向指针
2024-10-21 11:30:11
358
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人