David Xue

yarn 与 npm

yarn优点

• 速度快

1. 并行安装，npm是按照队列执行每个package，需要排队。而yarn是同步执行所有任务，提高了性能。
2. 离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。

vue3 与 vite

vue 2.x 与 vue 3.x

2.x 时代的 Vue 没有“应用”的概念，所谓的应用只是一个 Vue 的根实例 new Vue() 。
当我们需要修改一些全局属性的时候，只能通过 Vue 对象本身来修改，比如：

axios原理

createInstance底层根据默认设置 新建一个Axios对象， axios中所有的请求[axios, axios.get, axios.
post等…]内部调用的都是Axios.prototype.request, 将Axios.prototype.request的内部this绑定到新建的
Axios对象上, 从而形成一个axios实例。新建一个Axios对象时，会有两个拦截器，request拦截器，response拦
截器。

Jenkins自动化部署

Jenkins服务器搭建及基本配置

简介

Jenkins是一个开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件的持续集成变成可能。

Jenkins自动化部署实现原理

Jenkins部署环境

基本环境：
1.jdk环境，Jenkins是java语言开发的，因需要jdk环境。
2.git/svn客户端，因一般代码是放在git/svn服务器上的，我们需要拉取代码。
3.maven客户端，因一般java程序是由maven工程，需要maven打包

Jenkins安装

1.下载安装包jenkins.war；
2.在安装包根路径下，运行命令 java -jar jenkins.war –httpPort=8080，（linux环境、Windows环境都一样）；
3.打开浏览器进入链接 http://localhost:8080.
4.填写初始密码，激活系统

转发：https://www.cnblogs.com/wfd360/p/11314697.html

转发：https://blog.csdn.net/qq_21793443/article/details/105293348
https://zhuanlan.zhihu.com/p/59046576
https://zhuanlan.zhihu.com/p/39102712

前端常考算法题

209. 长度最小的子数组

描述：

1. 给定一个含有 n 个正整数的数组和一个正整数 target 。
2. 找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 [numsl, numsl+1, …, numsr-1, numsr] ，并返回其长度。如果不存在符合条件的子数组，返回 0 。

示例 1：
输入：target = 7, nums = [2,3,1,2,4,3]
输出：2
解释：子数组 [4,3] 是该条件下的长度最小的子数组。

示例 2：
输入：target = 4, nums = [1,4,4]
输出：1

示例 3：
输入：target = 11, nums = [1,1,1,1,1,1,1,1]
输出：0

Vue组件间如何通信

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。

vue 组件间通信的几种方式，如 props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和 provide/inject。

父子组件生命周期

加载渲染过程
　　父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
　　父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
　　父beforeUpdate->父updated
销毁过程
　　父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

keep-alive组件原理

概念

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

作用

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

原理

在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode 的 name 符合缓存条件（可以用 include 以及 exclude 控制），则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。

VNode：虚拟DOM，其实就是一个JS对象

hash与history路由的区别

1. hash路由在地址栏URL上有#，而history路由没有会好看一点
2. 我们进行回车刷新操作，hash路由会加载到地址栏对应的页面，而history路由一般就404报错了（刷新是网络请求，没有后端准备时会报错）。
3. hash路由支持低版本的浏览器，而history路由是HTML5新增的API。
4. hash的特点在于它虽然出现在了URL中，但是不包括在http请求中，所以对于后端是没有一点影响的，所以改变hash不会重新加载页面，所以这也是单页面应用的必备。
5. history运用了浏览器的历史记录栈，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法（需要特定浏览器的支持），它们提供了对历史记录进行修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。