- 博客(23)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 修复vite中使用react提示Fast refresh only works when a file only exports components.
我通过 `vite` 构建了一个 `react` 应用并使用 `react.lazy` 来懒加载组件，但是在使用过程中 一直提示 `Fast refresh only works when a file only exports components. Move your component(s) to a separate file.eslint(react-refresh/only-export-components)`。这里简单的记录下问题的修复方式。
2024-04-17 09:30:51
2074
原创 vue3 源码解析（7）— diff 算法源码的实现
vue3 采用的 `diff` 算法名为快速 diff 算法，整个 `diff` 的过程分为以下5个阶段完成。 1. 处理前置节点 2. 处理后置节点 3. 处理仅有新增节点 4. 处理仅有删除节点 5. 处理其他情况（新增 / 卸载 / 移动）
2024-04-17 09:29:06
1283
原创 vue3 源码解析（6）— lifecycle 生命周期的实现
对于 vue3 的生命周期，我们经常性会去疑问，生命周期有哪些呢，它是怎么去实现的， 又是什么时候调用的。
2024-02-01 14:43:24
995
原创 vue3 源码解析（5）— patch 函数源码的实现
在 vue 中 patch 函数的作用是在渲染的过程中，比较新旧节点的变化，通过打补丁的形式，进行新增、删除、移动或替换操作，此过程避免了大量的 dom 操作，提升了运行的性能。
2024-02-01 14:41:57
1451
原创 vue3 源码解析（4）— createApp 源码的实现
我们通过阅读源码了解到，createApp 函数是 vue3 的入口函数，通过 createApp 函数我们可以创建一个应用。createApp 的实现是借助了 createRenderer 函数，createRenderer 的实现内部包装了createAppAPI。createApp 函数接收一个组件，然后返回一个应用，这个应用中有一个 mount 方法，这个 mount 方法就是用来将应用挂载到容器中的。
2024-01-12 15:08:26
1523
原创 vue3 源码解析（3）— computed 计算属性的实现
通过对computed的源码分析，我们可以看到 vue3 如何实现计算属性的。当我们创建一个计算属性时，vue 会收集这个计算属性的所有依赖项。然后，当这些依赖项发生变化时，vue 会重新计算这个计算属性的值。并通过_dirty这个标志位来判断是否需要执行副作用函数并更新_value的值。这种机制使得我们可以方便地创建基于其他响应式依赖项的计算属性。
2024-01-10 15:46:07
1478
原创 vite 深入浅出
vite(轻量，轻快的意思) 是一个由原生ES Module驱动的 Web 开发前端构建工具。浏览器原生 ESM：浏览器支持的 JavaScript 模块化标准，可以直接使用标签加载模块，无需打包或转译。在开发环境下基于浏览器原生ES Module的支持实现了no-bundle服务。另一方面借助esbuild超快的编译速度来做第三方库构建和ts/jsx语法编译，从而能够有效提高开发效率。在生产环境下基于rollup打包来构建代码。
2023-11-13 16:32:21
583
原创 vue3 源码解析（2）— ref、toRef、toRefs、shallowRef 响应式的实现
这篇文章主要介绍了 vue 3 的响应式原理，其中涉及到了reftoReftoRefsshallowRef等函数的实现。ref：ref 函数用于创建一个包含响应式数据的引用对象，它接受一个基本类型或对象类型的参数，并返回一个具有 value 属性的对象。当访问或修改 value 属性时，会触发响应式更新。ref 函数会对对象类型的参数进行深度响应式转换，即递归地将对象的所有属性都转换为响应式的。
2023-10-25 16:11:38
621
原创 vue3 源码解析（1）— reactive 响应式实现
reactive：函数返回一个对象的响应式代理。reactive 函数会调用createReactiveObject函数，根据对象的类型，创建不同的代理处理器。reactive函数的参数必须是一个对象，否则会报错。：函数根据对象的类型，创建不同的代理处理器。如果对象是一个数组，会创建一个 collectionHandlers 对象；如果对象是一个普通对象，会创建一个 baseHandlers对象。代理处理器是一个包含 get、set、deleteProperty 等方法的对象，用于拦截对象的属性访问和修改。
2023-10-24 15:04:41
723
原创 基于 Docker + Nginx + Gitlab-runner 实现前端自动化部署流程
在早期部署前端项目时，我们通常会通过ftp把前端代码直接传输到指定的物理机上，或者通过ssh登陆到指定的物理机上，然后拉取指定仓库的前端代码在本地经行打包构建，构建完成之后在通过ssh将打包之后的文件上传到ngnix指定的目录下面，这样就算部署成功啦。在实际开发中，通常会基于Docker + Nginx + Gitlab-runner 来实现前端项目的部署。
2023-07-20 20:45:50
1232
1
原创 基于装饰器对通用表格的封装
在Vue中如何将通用的方法抽象出来进行封装，mixin是一种方式，但是mixin的缺点也很明显，关于mixin的缺点这里不做过多介绍，也可以通过这篇文章介绍的通过装饰器对通用列表的分装也是一种比较好的处理方式。.........
2022-08-06 15:13:46
281
1
原创 Vue实战中的策略模式
通过传入不同参数来调用不同的接口这样的场景在熟悉不过了，通常情况下会这样写到：// A.vueexportdefault{props:{type:String},queryList(){constapiMaps=newMap([['类型A','接口A'],['类型B','接口B'],['类型C','接口C'],['类型D','接口D']])}constap.........
2021-09-09 21:24:53
879
原创 增强VSCode智能感知能力
系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言本文说的类型支持仅仅是VSCode的IntelliSense功能，并非静态类型语言的类型检查，所以对开发的效率提升不大，但是可以提高项目的可维护...
2021-09-02 23:33:23
1888
原创 vue cli3使用官方方法配置sass全局变量报错
更新的scss版本在vue cli3的项目里面的配置需要修改参数设置，具体在vue.config.js文件很多博客里面的写法都是这样的 css: { loaderOptions: { sass: { // @/ is an alias to src/ data: `@import "@/styles/variables.scss"...
2019-11-21 10:04:20
1111
原创 koa2 使用passport权限认证中间件
做后端系统避免不了要做权限认证，比如本地用户登录，第三方登录。权限认证的思路也极其简单，不外乎就是登录，登出，路由守护三部分。今天要讲的权限认证中间件那就是：passportpassport 是 Node 的认证中间件，它的存在只有一个单一的目的，就是认证请求。配置 passport在认证过程中 passport 需要配置三个部分注册策略序列化反序列化这里把 passport...
2019-09-27 11:50:02
1005
原创 解决Ajax获取到数据放入echarts里不显示最有效的解决方法
废话不多说，直接上码：var temp = [];var tempArray = [];var data;$.ajax({ type : "post", url:"", data : {}, dataType : "json", success : function(data) { if (data) { $....
2018-02-03 17:35:18
5423
5
原创 Vue--搭建个人博客
1.初始化vue项目 1.1环境初始化 1.安装node。官网直达 2.安装淘宝npm镜像提高下载速度。 npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装vue脚手架vue-cli。 npm install --global vue-cli 1.2创建项目
2018-01-12 16:09:00
9402
1
翻译 JS前端创建html或json文件并浏览器导出下载
一、HTML与文件下载如果希望在前端侧直接触发某些资源的下载，最方便快捷的方法就是使用HTML5原生的download属性，例如：下载如果纯粹利用HTML属性来实现文件的下载（而不是浏览器打开或浏览），对于动态内容，就无能为力。例如，我们对页面进行分享的时候，希望分享图片是页面内容的实时截图，此时，这个图片就是动态的，纯HTML显然是无法满足我们的需求的，借助JS和其它一些HT
2017-07-28 16:39:52
10052
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人