从源码分析Vue2和Vue3的响应式原理
前言Vue2和Vue3的响应式原理一直是前端面试中的高频考点，如果你还只知道Vue2通过defineProperty方式实现，Vue3通过代理的方式实现，是不是就太浅显了。那本文带大家从源码去解读他们的实现，响应式实现主要分为三步：数据劫持、收集依赖、派发更新。
Vue2响应式原理本小节涉及的完整代码github源码链接，这是简化过的源码，添加了注释方便阅读。
整个过程就像上面这张图一样，浏览器会触发’Touch’，这是浏览器在编译文件的过程中完成对所有的HTML中的{{}}、v-text、v-model等涉及响应式的依赖，对每个依赖new Watcher，作为后面的订阅者，因为响应式的目的就是自动完成更新这些订阅者。
数据劫持：在数据劫持阶段将data中的数据添加响应式（对象会以递归的形式去添加）
收集依赖：针对data中每个变量new Dep，在getter中 且 watcher 中依赖这个变量的时候去收集依赖，变量更改的时候触发setter去派发更新
派发更新：watcher对象在创建过程会传入updata用到的cb方法，该方法会去更改D ...
JS创建对象的十种方式
前言面向对象是一种重要的编程范式，如何灵活的创建对象，是对编程基本功的考验，本来我们来探讨创建对象的十种方式。我将这十种分为new Object、构造函数与原型对象、其他三个大类。
new Object这三种本质都是new Object，他们无法根据对象的原型对象准确判断对象的类型，因为原型对象上都是Object。console.log(obj.__proto__===Object.prototype); // true
new Objectconst obj = new Object({name: 'wayne',age: 18})
字面量方式const obj = {name: 'wayne',age: 18}
工厂函数方式function createPerson(name, age) { return {name,age,}} const obj = createPerson('wayne', 18)
构造函数与原型对象这四种是对构造函数 ...
实现水平垂直居中的十种方式
前言实现水平垂直居中是一道经典的面试题，如果你能侃侃而谈这十种实现水平垂直居中的方式，一定会令面试官眼前一亮。按照实现方式的不同可粗略分为三类：绝对定位实现的四种、flex实现的两种、其他四种。
绝对定位实现的四种<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>水平垂直居中</title> <style> /* 公共代码 */ .father { border: 1px solid red; width: 300px; height: 300px; ...
实现两栏布局的五种方式
前言实现两栏布局也是一道经典的面试题，两栏布局即左边固定右边伸缩，要实现两栏布局的方式超过十种了，下面举例五种，用来抛砖引玉。
float+BFC<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>两栏布局</title> <style> /* 方法1 左元素固定宽度，向左浮动 右元素不设置宽度，会自动撑满，重叠问题可使用 ...
实现三栏布局的十种方式
前言实现三栏布局也是一道经典的面试题，如果你能侃侃而谈这十种实现三栏布局的方式，一定会令面试官眼前一亮。三栏布局即左右固定中间伸缩，将三栏布局的方式按照中间栏的渲染顺序可以分为三种：float实现的三种（中间栏最后渲染），flex、grid、绝对定位实现的三种（中间栏中间渲染），双飞翼圣杯实现的四种（中间栏最后渲染）
float实现的三种float实现的方式优点是兼容性好；缺点是需要将中间栏放在最后渲染，网速慢的情况下可能会影响用户体验。
float+BFC<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>CSS实现三栏布局</title> <style type="text/css"> ...
浏览器输入URL并回车发生了什么
前言这是前端面试中的高频问题，文章有点长，若你耐心读完一定有所收获。若你在面试中能简单描述出完整过程，一定会令面试官耳目一新。但其中涉及的细节也是相当多，读者还需要主动探索，不然还是禁不起大厂面试官的深挖。
大致流程：URL 解析>DNS 查询>TCP 连接>服务器处理请求>浏览器接收响应>渲染页面>四次断开
渲染页面的过程：构造文档对象模型(DomTree)，构造CSS 对象模型(CSSOM)，生成渲染树、排版、分层、绘制
URL解析如果是非 URL 结构的字符串，则会用浏览器默认的搜索引擎搜索该字符串。（UTF-8）URL 主要由 协议、主机、端口、路径、查询参数、锚点6部分组成！输入URL后，浏览器会解析出协议、主机、端口、路径等信息，并构造一个HTTP请求。
浏览器发送请求前，根据请求头的expires和cache-control判断是否命中（包括是否过期）强缓存策略，如果命中，直接从缓存获取资源，并不会发送请求。如果没有命中，则进入下一步。
没有命中强缓存规则，浏览器会发送请求，根据请求头的If-Modified-Since和If-N ...
解决跨域问题的5种办法
前言跨域问题一直是前后端交互过程中遇见频率最高的问题，本文带来五种解决跨域问题的办法，总有一种适合你。
跨域
什么是跨域？
同源：两个资源的 协议、域名、端口都相同。否则就是跨域
为什么要有跨域？
浏览器的安全限制，为了防止读取非同源的DOM、Cookie、LocalStorage、IndexDB；
跨域请求的过程？
向非同源发起请求，请求资源跨域时，浏览器一般会先发起预检请求，检测资源是否支持跨域，再发起真实请求，请求类型为 preflight ，请求方法为OPTIONS 表示预检请求。
解决跨域的五种方式
把协议、域名、端口改成相同的；
在响应头添加 Access-Control-Allow-Origin 相关字段来允许跨域，利用这种解决思路具体的实现的方式有 nginx配置、后端手动修改字段CORS、后端中间件请求拦截、谷歌插件等方式；
JSONP，利用了script标签不受浏览器同源策略的影响；
反向代理，利用跨域只对浏览器有效，在node中开启跨域代理，负责请求转发。Vue和React都有代码配置，适用于开发环境；
CSP（content-Securi ...
前端如何并发控制
前言众所周知，Promise处理异步任务能避免他们阻塞程序执行。当一次并发大量异步任务会导致内存消耗过大、程序阻塞等问题。本文带大家实现异步任务控制器，限制并发异步任务数量，来解决高并发问题。假设一个场景：有20个异步任务，每次只能处理三个异步任务，要求尽可能快速的拿到处理结果。下面分为Promise.all和异步任务控制器两种实现方案。
Promise.all暴力Promise.all最简单的方式就是Promise.all，一次并发20个任务，没有使用异步任务控制，简单、粗暴。
// 模拟请求 随机产生100-500ms延时function randomRequest(url){ return new Promise((resolve)=>{ let delay = Math.floor(Math.random()*400+100) setTimeout(()=>{ resolve({state:'success',data:{url}& ...
vite打包优化记录
前言本文是一次关于Vite项目打包优化的记录，项目做好打包优化，能减少加载时间和提升用户体验、还能节约服务器流量为公司省下一笔不小的开销。
优化前使用rollup-plugin-visualizer查看优化前的情况如下，可见tui-image-editor.js文件占大头达到56.28%，剩下的依次是react、react-dom。
优化CDN加速将依赖的第三方模块写成CDN形式，保证自己写的代码的小体积，安装vite插件vite-plugin-cdn-import到开发环境pnpm i vite-plugin-cdn-import -D
import importToCDN from 'vite-plugin-cdn-import'export default { plugins: [ importToCDN({ modules: [ modules: [ autoComplete('react'), autoComplete('rea ...
某独角兽公司实习总结
前言公司是一家做无人驾驶的独角兽公司。试车过程采集的各项传感器数据经过几个部门处理后，我们组负责将各项指标数据的展示给B端客户，我任务是对接后端展示告警数据。其中包含多种告警形式、多种看板数据的筛选方式，多种展示形式。技术栈为Quasar+Vue+Axios+Echarts。
单点登录第一个任务是在现有的前端加入单点登录，提高系统的安全性。因为是第一次接触Quasar和单点登录，压力还是蛮大的，经过两天的恶补，把官方文档反复看翻了几遍，再围绕下面的几个问题去思考如何实现。
什么是Keycloak？
学习前端如何对接Keycloak有JS原生的实现方式，还有Vue的方式，因为Quasar框架是Vue的二封装，我果断选择了Vue的方式
在github找到了vue-keycloak，研究明白demo，主要关注如何实现登录退出
前端集成vue-keycloak服务
用户的登录流程为：前端先判断当前用户是否拥有keycloak登录授权=>没有则会跳转到keycloak的登录页完成验证=>验证通过后则跳转回当前页
在集成的过程中出现的几个问题：
vue-key ...
