想成为大神的小白

原创 【实录】NestJS 中的 IoC

IoC 全称 Inversion of Control 译为控制反转，是面向对象中的一种设计原则，用来降低代码之间的耦合度。

原创 【实录】uniapp - android 静态声明权限和动态请求权限的区别

在 UniApp 的 manifest.json 中已配置了 RECORD_AUDIO、CAMERA、ACCESS_FINE_LOCATION 权限，为何还需在代码中调用 plus.android.requestPermissions() 动态申请？

原创 【源码】一个项目竟然引入三个项目管理工具？统一一下吧！！！

在团队协作中有一个场景很常见: 同一个项目但是包管理器却是不同的。这样不是不可以，但这样是不合理的。

原创 【源码】听说你还在单独为 await 做 try catch？

通过调用传入的 Promise 实例，在 then 和 catch 中分别处理成功和失败最后将其结果放到数组并返回。在处理错误的时候如果有传入第二个参数则将其和错误信息通过 Object.assign() 合并后放到数组中返回。

原创 【源码】npm init vue@x 干了什么？带你读懂源码逻辑

通过 npm init vue@3 或者 npm init vue@2 初始化一个对应版本的 vue 项目。

原创 【解析】从输入 URL 到页面展现的全过程

1. 解析 URL。2. 缓存判断。3. 域名解析 （DNS 解析）。4. 获取 MAC 地址。5. TCP 三次握手。6. HTTPS 的 TLS 四次握手7. 发送 HTTP 请求。8. 服务器处理请求并返回 HTTP 报文。9. 断开连接。10. 浏览器解析渲染页面。

原创 【源码】Element-UI make new 新增组件

在 Element-UI 源码中可以通过命令 make new 新增组件，减少重复工作。通过该命令创建组件目录结构，包含测试代码、入口文件、文档。

原创 【源码】arrify 转数组

从单元测试入手，一步一步跟着断点进行调试来阅读源码，在读的过程中产生的问题，如果不是阻塞性的问题都将其记下来，先将整体流程完成，然后再去解决之前产生的问题。

原创 【源码】omit.js 剔除对象中的属性

库的作用:1. 删除目标对象中的一个或多个 key2. omit 接收两个参数，第一个参数是目标对象，第二个参数是目标对象中将要被删除 key 组成的数组。从单元测试入手，一步一步跟着断点进行调试来阅读源码，在读的过程中产生的问题，如果不是阻塞性的问题都将其记下来，先将整体流程完成，然后再去解决之前产生的问题。

原创 【源码】Vue3 模板编译

通过 traverseNode 方法可以得到是他会对每个 node 上的 codegenNode 属性进行赋值，在 codegenNode 中会有一个 patchFlag 值。这里会在 diff 的时候用到。在 node 对应的 context 中还会有一个 helpers 属性，这里存放了每个节点应该什么样的处理的方法名。这里的会在代码生成阶段用到，会将这里的所有方法引入。

原创 【源码】vue3 初始化流程

先创建vue实例，然后将实例进行挂载。在挂载过程中根据传入的组件对象创建对应的虚拟DOM。根据虚拟DOM创建对应的组件实例。然后初始化props和slots并调用setup函数。生成渲染函数兼容2.x版本的的处理执行钩子函数获取subTree并调用patch处理调用mounted钩子函数在整个挂载流程中遵循深度优先。

原创 【源码】Vue3 computed 源码

computed 会进行缓存上一次计算出来的结果，当计算属性所依赖的属性没有发生改变时，访问计算属性会返回之前在 _value 缓存的值。computed 的求值是惰性的，计算属性所依赖的属性发生变化的时候计算属性不会立刻去求值，而是调用了计算属性的 scheduler 函数将 _dirty 改为了 true 并调用 trigger 函数通知依赖这个计算属性的地方进行更新。只有触发了计算属性的 get value 函数的时候才会调用 this.effect 函数进行重新计算求值。

原创 【源码】Vue3 ref/toRefs 源码

通过 toRefs 可以将对象或者数组内的每一项都转换为 ref 类型，我们也就可以采用 .value 的形式访问。至于为什么在 template 中不需要采用 .value，是因为在模板编译的时候替我们省略了。

原创 【源码】Vue3 watchEffect 源码

在看 reactive 源码的时候发现单独调用 reactive 函数并没有收集依赖，那么什么时候才会收集依赖呢，我把之前的 demo 改了改，加入了 watchEffect 之后发现在 watchEffect 中用到的属性会被收集依赖，那为什么调用了 watchEffect 之后就会收集依赖呢，让我们进入到源码中一探究竟吧。

原创 【源码】Reactive 源码

看代码要带着问题去看，不要盲目的去看问题就是这次看源码的主线，要围绕着主线去展开，过程中和主线没有多大关系的该忽略掉就忽略掉开源项目一般都封装的比较好，有可能一个函数中会引用多个文件中的函数，每次跳转的时候将跳转的目录记下来，避免跳着跳着就不知道跳哪去了进入到一个文件中先将函数都收起来，便于查看

原创 【源码】Vue 构造函数及初始化做了什么

看源码前辈们的建议：1. 看代码要带着问题，不要盲目的去看2. 你的问题就是你的主线，要时刻记着你的主线是什么，那些和主线没有多大关系的该忽略就暂时忽略掉3. 在网上找到高质量的博客或视频，跟着前辈走会让你事半功倍

原创 vue-treeselect 中的小 tip

1. 设置选中当前节点不默认选中父节点和子节点：flat: true参考资料：https://vue-treeselect.js.org/#flat-mode-and-sort-values2. 选中了分支节点及其所有后代，则vue-treeselect会将它们组合到值数组中的单个项目中，可以通过valueConsistsOf 来更改：ALL: 选中的所有节点都将包含在 v...

原创 正则(验证输入内容不能为空)

/^.+$/

原创 source-map 使用

1. vue.config.js 中增加配置module.export = { chainWebpack(config) { config.when( process.env.NODE_ENV === 'development', // production config => config.devtool('#cheap-module-eval-s...

原创 element-ui 中自定义上传（http-request）的注意点

1. upload 组件中的 action 不能为空，要随便给一个字符串1. 上传时需要将参数改成 FormData() 类型的，添加参数时只能通过 append('key', value) 的形式进行添加2. 请求头中要将 Content-Type 设置为 multipart/form-data 的形式3. 如果请求参数使用了 qs 进行了封装，那么在上传的时候请对上传的...

原创 vue 中实现下载功能（后端数据是 Blob 类型）

昨天实现下载功能的时候，本以为直接使用 window.location.fref, 就可以直接完成下载，但是多次尝试之后无法完成。在请求中后端要求要加上 token，通过 href 的方式走接口是不会走全局的接口拦截器的，所以就没有办法通过拦截器去往 request header 中添加 token；询问后端在 URL 中取 token 行不，后端说 NO，这样的话之后想办法走接口，询问后端后...

原创 页面隐藏滚动条

直接搞：HTML:<div class="outer-container"> <div class="inner-container"> ...... </div></div>CSS:.outer-container{ width: 360px; height: 200px; position: ...

原创 npm 报错：operation not permitted, The operation was rejected by your operating system.

具体报错如下：npm ERR! Error: EPERM: operation not permitted, unlink 'C:\Users\Dao\Desktop\vue-element-admin\vue-element-admin\node_modules\.staging\echarts-7bd35471\map\js\province\jilin.js'npm ERR! { ...

原创 linux下安装nginx，并启动vue项目

小白，第一次尝试linux，并安装nginx完成配置，成功启动vue项目1. 安装依赖yum install gcc-c++yum install -y pcre pcre-develyum install -y zlib zlib-develyum install -y openssl openssl-devel2. 下载nginx，并解压wget -c https:/...

原创 vue-cli项目无法用ip访问

在build目录下有一个webpack.dev.conf.js的配置文件，其中的host属性取自 host: HOST || config.dev.host 所以要去看一下config.dev.host，在config目录下index.js文件中找到dev对象的host属性（原来的是localhost，改成0.0.0.0）这样就可以使用本机IP访问项目了。 ...

原创 npm心得

 1. 清空npm镜像，还原成官方镜像npm config delete registrynpm config delete disturl2. 取消代理npm config delete proxynpm config delete https-proxy3. node-sass 安装报错解决办法主要是windows平台缺少编译环境， 1、先在项目地址下的黑窗口运...

原创 前端开发文档-学习笔记

规范目的为提高团队协作效率便于后台人员添加功能及前端后期优化维护输出高质量的文档命名规范为了让大家书写可维护的代码，而不是一次性的代码让团队当中其他人看你的代码能一目了然甚至一段时间时候后你再看你某个时候写的代码也能看普通变量命名规范命名方法 ：驼峰命名法 命名规范 ： 命名必须是跟需求的内容相关的词，比如说我想申明一个变量，用来表示我的学校，那么我们可以这...

原创 elementUI中表格分页多选记忆功能的实现逻辑

学习地址引用：https://www.cnblogs.com/wanglu/p/9160416.html 

原创 连等赋值

跟dalao学习的过程中遇到了连等赋值，dalao的问题触及到了我的知识盲区，查询一番得以解惑。// 问题 var a = { n: 1 }; var b = a; // 把a的引用复制了一份给b a.x = a = { n: 2 }; // . 的优先级高于 = 所以先生成 a = {n: 1, x: undefined} console.log(a.x);...

转载 node中的proxyTable

同事突然问起，发现自己也不了解，网上百度了一番。（百度到的链接：https://segmentfault.com/q/1010000014042635）跨域在浏览器是禁止的，但是在服务端是不存在跨域的，所以，浏览器可以发给自己的服务端，然后由自己的服务端再转发给本身需要跨域的服务端。vue-cli中的proxyTable利用的是http-proxy-middleware作为中介，http-...

原创 vue 使用 keepAlive 坑

1. transition和keep-alive一起使用的时候要将transition作为keep-alive的父容器，否则keep-alive的效果出不来2. 将需要缓存的页面在路由配置的meta中写上keepAlive: true,不需要缓存的就不用写3. 有的页面需要缓存，有的页面不需要缓存，所以需要做判断。需要使用第二种方法，因为第一种方法在第一次进入页面的时候keep-a...

转载 你不知道的js上卷笔记

原创 git 笔记

配置名字和email： 1. git config --global user.name 'Your Name' 2. git config --global user.email '[email protected]' 补充： git config 和 --global参数 表示这台机器上的所有git仓库都会使用这个配置创建版本库： 1. 创建一个空目录： ...

转载 执行上下文笔记

执行上下文创建阶段： 执行上下文执行阶段：完成所有变量的分配，执行代码变量对象创建的过程：全局上下文的变量对象是全局对象 函数的所有形参组成变量对象（名称和对应值组成。形参的值为undefined） 函数声明：如果变量对象已经存在相同名称的属性，则完全替换这个属性 变量声明：如果变量名称和已经声明的形参或函数相同，则变量声明跳过这类属性代码执行阶段，再次修改变量对象的属...

转载 组件配置项inheritAttrs、组件实例属性$attrs和$listeners

1. 使用子组件传递了三个prop，但子组件值声明了两个prop，那么多出来的那个将被作为html自定义属性显示在子组件的根元素上。解决办法：在子组件的配置项中增加：inheritAttrs: false;这样就不会再根元素上增加。2. 使用子组件传递了三个prop，但子组件值声明了两个prop。多余的那个未声明的可以用this.$attrs来获取3. $listeners是组件的内置属性...

转载 element-ui中利用resetFields()清空表单时的坑

原文链接：https://blog.csdn.net/weixin_41991501/article/details/81975821#commentBox先上图：在使用的过程中：1. model中的字段要和ref中的字段对应上，model中的字段也就是v-model中监听的对象的字段。2. prop中的字段要和v-model中的字段对应上，这个四个字段都是为了做验证或重置...

原创 创建vue项目的时候遇到：PhantomJS not found on PATH

提示找不到PhantomJS需要进行下载，如果网速允许的话可以直接npm install -g phantomjs如果网速不给力的话，那就先进行淘宝镜像安装npm install -g cnpm --registry=https://registry.npm.taobao.org再用cnpm进行下载cnpm install -g phantomjs大功告成...

原创 input事件和$nextTick

在工作中遇到了一个需求：在input框中实时监测用户输入的内容，只能是数字，如果不是数字，就返回默认值。 用input事件监听用户输入的内容，但是发现如果用户输入的不是数字，在返回默认值的时候出了问题。 这里在赋值的时候在控制台看是赋值成功的，但是页面中还是一个错误的值，并不是返回的那个默认值。想到了$nextTick(),开始查阅资料。Vue的官方文档异步更新队列的介绍 ...

原创 input输入框中，如果接收到的是Number类型

input输入框中，如果接收到的是Number类型的数字，那么会将小数点后边的0自动舍去。如果接收到的是String类型的数字，那么就会原样输出到input中。

原创 element-ui中select的坑

element-ui中的select下拉框，其中的选中项option是通过select中的v-model监听的变量来和option中的value(一般是id)进行匹配，如果匹配成功，则把相对应的label显示到select框中。其中，v-model所监听的变量数据类型一定要是Number类型，如果是String类型则无法进行匹配，则会将接收到的String类型的字符串原样输出到页面上。...