休庸-优快云博客

原创 git了解

git就是一个软件管理器，不同一般的是它是分布式的，不仅有一个中心的服务器控制最新版本代码，而且每个开发者自己还有个本地仓库，所以在开发过程中都是先将代码提交到本地仓库再推送到中心服务器上的，这样的好处就是每个人都依赖于中心服务器来实现交互，但又不会被中心服务器限制，就算中心服务器挂了，也能很容易的找到最新版本的代码，而且我自己的工作依然可以顺利进行，提交到本地仓库，当中心服务器修复之后，再将自己仓库的东西推送到中心服务器。

2023-04-27 20:20:09 303

原创 vue3有了哪些提升

Vue2 中的一个常用代码复用方式是 mixins 混入，mixins在一些场景下确实能很大的提升代码复用率，但同时也会带来一些副作用，比如依赖关系不清晰，mixins里定义的data和methods等在组件中使用时没有明确的引入和定义，而且可能与组件里定义的有命名冲突，有很大的维护风险。由于 es6 的模块化导入导出是静态可分析的，所以在打包的时候通过解析js代码就能明确知道哪部分代码使用了、哪部分代码没有使用，然后只对使用到的代码进行打包，这样就能实现按需打包的效果。（模块按需加载减少包大小）

2023-04-27 19:17:38 886

原创 Vue中 keep-alive

注意：只有组件被 keep-alive 包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。activated：在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

2023-04-27 19:16:58 262

原创父子组件生命周期的执行顺序

父亲beforecreate、父亲created、父亲beforeMount、孩子beforecreate、孩子created、孩子beforeMount、孩子mounted、父亲mounted、父亲beforeDestroy、孩子beforeDestroy、孩子destroyed、父亲destroyed，孩子的mounted早于父亲mounted。

2023-04-27 19:16:01 187

原创页面加载时，vue生命周期的触发顺序

路由勾子 (beforeEach、beforeRouteEnter、afterEach)根组件 (beforeCreate、created、beforeMount)组件 (beforeCreate、created、beforeMount)beforeRouteEnter的next的回调。指令 (bind、inserted)根组件 mounted。我们看到执行的顺序为。组件 mounted。

2023-04-27 19:15:56 302

原创 redux与vuex异同以及使用

action （同步action ，或借助中间件实现异步操作，action 不会改变 store，只是描述了怎么改变store）| mutation（用于同步操作）、action（可用于异步操作，提交 mutation） reducer（纯函数，根据 action 和旧的 store 计算出新的 store) store（单一数据源） Vuex 的核心概念。\2. 共同思想单—的数据源变化可以预测本质上∶ redux与vuex都是对mvvm思想的服务，将数据从视图中抽离的一种方案。

2023-04-27 19:14:33 181

原创 Restful风格详解

使请求路径变得更加简洁传递、获取参数值更加方便，框架会自动进行类型转换通过路径变量@PathVariable的类型，可以约束访问参数。若参数值与定义类型不匹配，则访问不到对应的方法，报错400错误的请求。安全，请求路径中直接传递参数值，并用斜线/分隔，不会暴露传递给方法的参数变量名。高效，更易于缓存的实现，让响应更加高效。

2023-04-27 19:14:15 402

原创什么是REST API？

按需编码条件是可选的，它允许客户按需运行一些代码，即通过脚本或applet将服务器逻辑的一部分扩展到客户端。因此，即使使用服务器提供的完全相同的服务，不同的客户也可能以特定的方式表现。当我说CRUD操作时，仅此而已，我们可以创建资源，读取资源，更新资源和删除资源。这意味着客户端不关心后端数据或数据存储，服务器不关心用户界面或用户状态，因此服务器可以更简单，更可扩展。由于REST遵循标准的HTTP操作，因此它使用具有特定含义的动词，例如“ get”或“ delete”，以避免不确定性。

2023-04-27 19:13:20 613

原创 ref的三种用法

注意： 1、$refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定。ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组，此时要拿到单个的ref 只需要循环就可以了。

2023-04-23 18:14:44 261

原创前端面试题之NodeJS系列

第一个参数为写入文件的路径或文件描述符第二个参数为写入的数据，类型为 String 或 Buffer 第三个参数为 options，默认值为 null，其中有 encoding（编码，默认为 utf8）、 flag（标识位，默认为 w）和 mode（权限位，默认为 0o666），也可直接传入 encoding 2、异步写入 fs.writeFile。中间件是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务，衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享，功能贡献的目的。

2023-04-22 16:03:54 232

原创类与对象的理解

类（class）：是构造对象的模板或蓝图，类也是一组相关属性和行为的集合。属性（成员变量）：就是该事物的状态信息（如同手机的颜色，材料）行为（成员方法）：就是该事物能够做什么（如同手机的打电话，发短信功能）对象：对象是类的实例。由于对象是根据类创建出来的，所以对象具备类中的属性和行为。类就是对象的模板，我们通过类创建出来的对象会具备类中的属性和行为（成员变量和成员方法），创建对象的目的就是为了访问类中的成员变量和成员方法。

2023-04-22 08:51:36 79

原创渲染流程-html、CSS、JS如何变成页面

页面总是会有很多复杂的功能，例如3D转换、页面滚动等，或者设置了z-index样式，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成图层树（LayerTree）。有了上面的DOM树和CSS样式表，接下来还需要计算出DOM树中的可见元素的几何位置，我们把这个计算过程叫做布局。能够作用于一个节点的CSS样式属性非常的多，需要将所有的CSS转换成渲染引擎容易理解、标准化的计算值。树形结构的数据的点，称为节点，节点与节点之间形成的关系有：父子节点、兄弟节点。

2023-04-21 13:18:50 167

原创浏览器地址栏输入地址按回车显示页面经过哪些过程

第四次挥手：客户端--->服务器 ACK=1,ack=w+1,seq=u+1 客户端状态变为TIME_WAIT，此时TCP未释放，需要等待计时器计时完成后，客户端状态变为CLOSED。第二次挥手：服务器--->客户端 ACK=1,ack=u+1,seq=v 服务器状态变为CLOSE_WAIT，TCP进入半关闭状态。第三次挥手：服务器--->客户端 FIN=1,ACK=1,ack=u+1,seq=w 服务器状态变为LAST_ACK。第一次握手：客户端--->服务端 ack=1,seq=x（x随机生成）

2023-04-21 13:18:05 444

原创 JavaScript 中的隐形类型转换

从上面这个例子，valueOf() 调用完以后还是返回一个数组，而 toString() 调用完返回的是一个字符串。valueOf() 方法与 toString() 方法很像，但是，它是当 JavaScript 需要把一个对象转换为某种基本数据类型，也就是一个数字而不是字符串的时候，才调用的方法。在if([]){...}中，[] 处于一个布尔环境中，我们从上面的表中知道对象在布尔环境中都会转换为 true（包括空对象、空数组、空字符串等），因此 if([]){...}，判定为真，打印出 ‘true’。

2023-04-21 12:15:21 69

原创 v-for中key是做什么的

（2）如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点的子节点了。（3）如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法；而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；

2023-04-21 10:33:22 154

原创 Vue中 keep-alive

注意：只有组件被 keep-alive 包裹时，这两个生命周期才会被调用，如果作为正常组件使用，是不会被调用，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。activated：在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

2023-04-21 10:27:28 118

原创父子组件生命周期的执行顺序

父亲beforecreate、父亲created、父亲beforeMount、孩子beforecreate、孩子created、孩子beforeMount、孩子mounted、父亲mounted、父亲beforeDestroy、孩子beforeDestroy、孩子destroyed、父亲destroyed，孩子的mounted早于父亲mounted。

2023-04-21 10:20:48 97

原创什么是单页应用？它的优缺点？其缺点的解决方案是什么？

而搜索搜索引擎抓取的内容，需要有完整的HTML和内容（搜索引擎只认识html里的内容，不认识js的内容）单页应用架构的站点，并不能很好的支持搜索，会导致单页应用做出来的网页在百度和谷歌上的排名差。不但浪费了网络流量，更重要的是有延迟，用户友好性，用户体验不好。这样一来，以后用户的每一个动作都不会重新加载页面（即不用再问服务器要页面的HTML，css和js代码），取而代之的是利用 JavaScript 动态的变换HTML的内容（这不需要和服务器交互，除非数据是动态，那么只需要问服务器要数据即可）。

2023-04-21 10:18:52 277

原创 webpack 怎么用

webpack-dev-middleware：中间件，将Webpack打包生成的文件暴露到Express或者Koa服务器上。2.创建一个名为modules的目录，用于放置JS模块等资源文件 3.在modules下创建模块文件，如hello.js,用于编写JS模块相关代码；2.安装Webpack Webpack是一款模块加载器兼打包工具，它能够把各种资源，如JS，JSX，ES6，SASS，LESS，图片等都作为模块来处理和使用。你：是的，Webpack有很多优秀的插件来优化打包效果。3.使用Webpack。

2023-04-21 10:15:25 177

原创 npm和yarn的区别（包管理工具）

5.0.3”表示安装指定的5.0.3版本，“～5.0.3”表示安装5.0.X中最新的版本，“^5.0.3”表示安装5.X.X中最新的版本。这就麻烦了，常常会出现同一个项目，有的同事是OK的，有的同事会由于安装的版本不一致出现bug。因为npm会把所有的日志输出到终端，有关错误包的错误信息就会在一大堆npm打印的警告中丢失掉，并且你甚至永远不会注意到实际发生的错误。更简洁的输出我用npm安装的时候，永远会有各种各样的警告，提示你版本问题等等，总担心下载版本不兼容报错，yarn默认只会打印必要的信息。

2023-04-21 09:36:28 85

原创 Vue自定义指令钩子函数（指令名字，配置对象（属性，函数））

•el: 指令绑定的元素。•expression: 指令的表达式，不包括参数和过滤器。•arg: 指令的参数。•name: 指令的名字，不包含前缀。•modifiers: 一个对象，包含指令的修饰符。•descriptor: 一个对象，包含指令的解析结果。•bind：只调用一次，在指令第一次绑定到元素上时调用。•update：在 bind 之后立即以初始值为参数第一次调用，之后每当绑定值变化时调用，参数为新值与旧值。•unbind：只调用一次，在指令从元素上解绑时调用。

2023-04-21 09:11:45 153

原创 iframe页面嵌套问题

一、 iframe的框架根据内容自适应高度 iframe是在项目设计中经常用到的框架标签。而它的作用就是把页面嵌套在自身形成的框架体中，从而实现在一个固定的地方可以切换多个页面，并且其他内容不变。在使用iframe这个框架标签时新手往往是直接固定iframe的宽高。那么当文本内容的长度不一样时就要一个一个地设置。当有上百个页面时这无疑是增加了代码量。而这个问题的解决方法也非常简单，我们只需要让它自适应高度就好。

2023-04-20 20:30:11 2954

原创实现数组扁平化的 6 种方式

普通的递归思路很容易理解，就是通过循环递归的方式，一项一项地去遍历，如果每一项还是一个数组，那么就继续往下遍历，利用递归程序的方法，来实现数组的每一项的连接。从上面普通的递归函数中可以看出，其实就是对数组的每一项进行处理，那么我们其实也可以用。的方法先转换为字符串，然后通过正则表达式过滤掉字符串中的数组的方括号，最后再利用。的方法，所以可以把数组直接转换成逗号分隔的字符串，然后再用。来实现数组的拼接，从而简化第一种方法的代码。的方法，两者共同使用，达到数组扁平化的目的。这个方法的实现，采用了扩展运算符和。

2023-04-20 20:24:29 166

原创 SSG、SSR、CSR 分别是什么

当用户访问某个 URL 时，服务端实时生成包含内容的 HTML 文件再返回，由于需要实时生成 HTML ，对服务器的压力会大一些。由于会返回包含内容的 HTML，所以也是利于 SEO 的。这种形式页面加载是最快的，也利于 SEO ，前提是页面内容在打包时就能确定，或者说大部分内容能确定，然后小部分内容通过客户端渲染来更新（结合 SSG 和 CSR 的方式）。SSG + CSR ：页面大部分内容在打包时就能确定，小部分动态内容不用考虑 SEO ，比如博客网站，内容部分用 SSG ，评论部分用 CSR。

2023-04-20 19:56:01 463

原创 SSR 服务端渲染

在讲服务度渲染之前，我们先回顾一下页面的渲染流程：浏览器通过请求得到一个HTML文本渲染进程解析HTML文本，构建DOM树解析HTML的同时，如果遇到内联样式或者样式脚本，则下载并构建样式规则（stytle rules），若遇到JavaScript脚本，则会下载执行脚本。DOM树和样式规则构建完成之后，渲染进程将两者合并成渲染树（render tree）渲染进程开始对渲染树进行布局，生成布局树（layout tree）渲染进程对布局树进行绘制，生成绘制记录。

2023-04-20 19:55:04 209

原创 iframe页面嵌套问题

但当我们在被iframe嵌套的页面里写window.location.href的页面跳转事件时，跳转的那个页面它不会覆盖掉当前的页面，而是被嵌套进iframe里。而不能让iframe内部嵌套的页面覆盖掉当前页面也是有原因的，因为这涉及到了安全性的问题。有iframe的一般都是主页面，如果让外来的页面把主页面覆盖掉，那么这个页面就可以对主页面进行操作，能够获取到主页面的信息。所以iframe內部嵌套的页面进行window.location.href的页面跳转时，跳转到的页面也会嵌套进iframe里面。

2023-04-20 19:15:45 1901 1

原创什么是单页应用？它的优缺点？其缺点的解决方案是什么？

这样一来，以后用户的每一个动作都不会重新加载页面（即不用再问服务器要页面的HTML，css和js代码），取而代之的是利用 JavaScript 动态的变换HTML的内容（这不需要和服务器交互，除非数据是动态，那么只需要问服务器要数据即可）。而搜索搜索引擎抓取的内容，需要有完整的HTML和内容（搜索引擎只认识html里的内容，不认识js的内容）单页应用架构的站点，并不能很好的支持搜索，会导致单页应用做出来的网页在百度和谷歌上的排名差。不但浪费了网络流量，更重要的是有延迟，用户友好性，用户体验不好。

2023-04-20 19:12:48 290

原创什么是VNode

在vue.js中存在一个VNode类，使用它可以实例化不同类型的vnode实例，而不同类型的vnode实例各自表示不同类型的DOM元素。例如，DOM元素有元素节点，文本节点，注释节点等，vnode实例也会对应着有元素节点和文本节点和注释节点。从上面的代码可以看出，vnode只是一个名字，本质上来说就是一个普通的JavaScript对象，是从VNode类实例化的对象。我们用这个JavaScript对象来描述一个真实DOM元素的话，那么该DOM元素上的所有属性在VNode这个对象上都存在对应得属性。

2023-04-19 21:43:18 365

原创深刻理解setTimeout

setTimeout的本质不是延迟多长时间执行，而是延迟多长时间把setTimeout中的回调函数放到执行栈中，这也是setTimeout的回调函数执行会比定义的延迟时间稍长的原因。这个时候有一个新的问题出现了，setTimeout本身并没有去调用其他的线程，仅仅是把本身需要执行的代码延后执行，尽管实现了异步操作的样子，但我个人认为，setTimeout并不是严格意义上的异步操作，只能称之为延迟操作。在setTimeout的执行形式上来看，setTimeout是不会阻碍其后续代码的执行的。

2023-04-19 21:14:14 320

原创虚拟DOM和真实DOM

虚拟DOM是一个轻量级的JavaScript对象，它原本是真实dom的副本，是一个节点树，它将元素，它们的属性和内容作为对象及属性。1：首先根据数据创建虚拟dom,它反映真实DOM的结构，然后由虚拟dom创建真实的dom树，真实dom树生成之后，在渲染到页面上。2：虚拟dom进行频繁修改，然后一次性比较并修改真实DOM中需要修改的部分，最后真实DOM进行排版重绘，减少节点排版与重绘损耗。2：如果数据发生改变，创建新的虚拟dom树，比较两个树的区别，调整虚拟dom的内部状态。三：虚拟DOM 的工作过程？

2023-04-19 20:05:17 1080

原创父子组件生命周期的执行顺序

父子组件生命周期的执行顺序是父亲beforecreate、父亲created、父亲beforeMount、孩子beforecreate、孩子created、孩子beforeMount、孩子mounted、父亲mounted、父亲beforeDestroy、孩子beforeDestroy、孩子destroyed、父亲destroyed，孩子的mounted早于父亲mounted。

2023-04-19 19:55:02 777

原创箭头函数的适应场景

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，函数体内没有自己的this，其内部的this指向是外层作用域的this（在箭头函数中this的指向是固定，声明的时候就静态绑定了）箭头函数不具备普通函数里常见的this、arguments等，不能用call()，apply()、bind()去改变this的指向。箭头函数适合于无复杂逻辑或无副作用的纯函数场景下，例如，map、reduce、filter的回调函数定义中。不适合定义对象的方法（如：对象字面量方法、对象原型方法、构造器方法）

2023-04-19 10:52:08 65

原创 redux与vuex异同以及使用

action （同步action ，或借助中间件实现异步操作，action 不会改变 store，只是描述了怎么改变store）| mutation（用于同步操作）、action（可用于异步操作，提交 mutation）Vuex改进了Redux中的Action和Reducer函数，以mutations变化函数取代Reducer，无需switch，只需在对应的mutation函数里改变state值即可。view——>action——>store——>reducer（返回）——>store——view。

2023-04-19 10:41:23 137

空空如也

空空如也