情非得已小猿猿

一、同程旅行一面自我介绍技术提问sessionStorage是否共享数据 window.openvue、react 源码有没有看过 说一下react17 react18区别webpack loader plugin，有没有自己写过vuex、reactx 刷新数据丢失 怎么做的持久化反问2、同程旅行二面自我介绍技术提问vue3与vue2的区别wepack loader plugin 有没有自己写过写plugin用过哪些勾子整体项目的项目的性能优化Fle

缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前一致，则可以直接返回前面存储的运算结果。使用代理模式后，图片本地对象负责往页面中创建一个img标签，并且提供一个对外的setSrc接口；代理模式（Proxy Pattern）是为一个对象提供一个代用品或占位符，以便控制对它的。代理对象负责在图片未加载完成之前，引入预加载的loading图，负责了图片预加载的功能。虚拟代理把一些开销很大的对象，延迟到真正需要它的时候才去创建，，起到的作用就是代理。

就需要将创建实例的工作从调用方（A类）中分离，与调用方解耦，也就是使用工厂方法创建实例的工作封装起来（减少代码重复）在一个 A 类中通过 new 的方式实例化了类 B，那么 A 类和 B 类之间就存在关联（耦合）使用工厂最终达到的效果是：多态，和类与类之间的松耦合。把具体的产品放到了工厂函数的prototype中。

页面存在一个模态框的时候，只有用户点击的时候才会创建，而不是加载完成之后再创建弹窗和隐藏，并且保证弹窗全局只有一个。第三方库都是单例模式，多次引用只会使用同一个对象，如jquery、lodash、moment。单例模式只会在全局作用域下创建一次实例对象，让所有需要调用的地方都共享这一单例对象。全局态管理库也应用单例模式的思想。

保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。的对象依赖关系，当被依赖的对象的状态发生了改变，所有依赖它的对象都会得到通知；很多第三方库都是单例模式，多次引用只会使用同一个对象，如。比如你订阅了某个博主的频道，当有内容更新时会收到推送。，把他们一个个封装起来，并且使他们可以相互替换。代理模式：为对象提供一个。观察者模式定义了一种。，以便控制对它的访问。

项目使用AES加解密，非对称加解密：前后端用公钥加密，AES 解密，对称加密：用aesKey、偏移量iv加解密 CryptoES.AES.encrypt

通过 this.props 获取传的 key 的 value 值。通过 this.props 获取对应的触发 action 函数。

跳转的公众号需要是企业认证的，才能配置业务域名，个人公众号暂不支持。在 global.d.ts 中添加以下内容，微信内置 API 需要小程序开发工具调试，EChart 相关文档。

调用useEffect时就是在告诉React在完成对DOM的更改后运行你的“副作用”函数。把“创建”函数和依赖项数组作为参数传入useMemo，避免不必要的执行渲染，以达到优化性能的目的。

react项目的几种创建方法：creat-react-app、umi、pro-cli

部分栏目预览（持续更新中🏃）more >> 相关链接：1️⃣ GitHub  2️⃣ 个人技术博客 3️⃣ 设计作品集  4️⃣ CSDN博客一、VuenextTick()原理more >>二、ReactAnt Design全局改变主题色react项目组件通信AntDesign表单Form实例方法（useForm/ref）… more >>三、TypeScriptTS中type与interface区

体验对比vite 启动、打包体验都比vue-cli快1、启动vue-cli：vite：2、打包vue-cli：vite：vue-clivue create vue3-cliDefault Vue 3orManually select featuresvitenpm i -g create-vite-appyarn create @vitejs/appyarn create vite hello-vue3 --template

1、获取表单实例函数式组件:const AppletModal: React.FC<any> = (props) => { const [form] = Form.useForm();}class类组件:import { FormInstance } from 'antd/lib/form';class AppletEdit extends React.Component<any, any> { form: any = React.cr.

1、extends 声明类的继承关系class Person构造器函数 constructorEmployee 继承 Person 属性和方法new 关键字 Employee 实例, 赋值给变量e1通过实例调用Person类中eat方法class Person { constructor(public name: string) { this.name = name } eat(){ console.log(this.name) }}// 继承Pers

父-子、子-父、跨组件通信

1、history.push 跳转引用 withRouter导出组件时使用import { withRouter } from 'react-router-dom'；class Header extends React.Component {}export default withRouter(Header);2、路由传值 query/paramsthis.props.history.push({ pathname: 'login', query: {

1、操作步骤加入购物车添加至项目Symbol方式引入，复制代码2、react 引用 iconFontimport { createFromIconfontCN } from '@ant-design/icons';const IconFont = createFromIconfontCN({ scriptUrl: [ '//at.alicdn.com/t/font_2196242_dq7mz11miut.js', // icon-home icon-gouwucheman ]

新项目创建1、react + antd + tsyarn create react-app xxx --template typescript安装antdyarn add antd2、react + tsyarn create-react-app xxx --template typescript已有react项目1、安装tsnpm i typescript -g 全局安装npm i typescript -D 当前项目安装2、tsc --init修改tsconf

1、js-cookie引入的 Cookie 找不到 module 问题yarn add @type/js-cookieyarn add js-cookie2、使用Ele-UI库的方法ts 类型报错 anythis.$refs.form.resetFields()this.$refs.form.validate()解决方法:const ref: any = this.$refs.form;ref.resetFields() // 清空表单ref.validate() // 表单

1、声明函数private、public、protectedprivate formStatus: string = 'create';2、@ 装饰器（替换钩子函数）从vue-property-decorator引入相应的装饰器（Component, Prop, Watch…）!: 表示强制解析, 告诉ts编辑器一定有值相关装饰器的用法<script lang="ts">import { Component, Prop, Watch, Vue } from "vue

一、已有vue项目1、安装依赖npm i vue-class-component vue-property-decorator —Snpm i ts-loader typescript tslint tslint-loader tslint-config-standard -Dvue-class-component：扩展vue支持typescript，将原有的vue语法通过声明的方式来支持tsvue-property-decorator：基于vue-class-component扩展

vue 项目yarn add echartsyard add vue-echartimport ECharts from "vue-echarts";import "echarts/lib/component/title";import "echarts/lib/chart/line";components: { 'v-chart': ECharts}<v-chart :auto-resize="true" :options="transaction_report"/&gt

1、ts中安装mockyarn add @types/mockjs -D2、新建mock文件mock├─index.ts├─data| └institution.ts具体接口institution.ts文件import Mock, { Random } from 'mockjs';const list:any = [];for (let i = 0; i < 20; i++) { list.push({ id: Random.id(),

一、GitHub设置里找到开发者设置勾选gitst记下token、gistGitHub Token令牌GitHub Gist二、vscode相关操作1、安装Settings Sync插件2、ctrl（Mac是command） + shift + p3、Sync: Advanced Options编辑本地的设置填写记下的token4、Sync: Upload / Update Settings(上传设置)5、在其他设备上的 VSCode中下载设置安装 Se

1、类的声明public 默认private 私有的，类的内部访问,外部不能使用protected 类的内部和子类能访问到class Person { private name: string; eat() { console.log(this.name) }}let p1 = new Person();p1.name = 'achao'p1.eat(); // achao js文件依然可以编译控制台提示报错[外链图片转存失败,源站可能有防盗链机制,建议将图

1、给变量后面定义类型只能是定义的类型，否则ts会提醒报错any 可以追加其他类型let myname: string = "achao"let age: number = 13let alias: any = "yaoyao"let man: boolean = true2、给方法、参数定义类型方法后面定义的类型时必须return且返回对应类型void 表示没有返回值// 不需要返回值function test ():void { return "" // 提醒

1、安装typescriptnpm i -g typescripttsc -v 查看安装版本 //Version 4.0.32、生成对应js文件tsc test.ts 同目录下会生成一个对应的jstsc file1.ts file2.ts file3.ts 可以同时编译多个 ts 文件// ts文件let message:string = "Hello World" let num1:Number = 13 let num2:any = [1, 2, 4]consol

一、tree shaking （摇树优化）tree shaking概念：1个模块可能有多个方法，只要其中某个方法使用了，整个文件会被打到bundle中tree shaking 只将用到的方法打到bundle中，没用的在uglify阶段被擦除webpack默认支持，在.babelrc文件中设置 modules: false即可production mode 下默认开启 tree shaking必须是ES6语法tree shaking原理：依赖于ES6 moudel特性只能作为模块

问题场景:开发中修改第三方组件样式由于 scoped 属性的样式隔离，可能需要去除 scoped、添加!important、另起一个 style这些做法都会带来副作用（组件样式污染、不够优雅）解决方法：可以使用 >>> 或 /deep/ （亲测有效）解决这一问题样式穿透在css预处理器中使用才生效<style scoped>/deep/ .el-checkbox { display: block; font-size: 26px;

一、初始化1、npm init -ynpm webpack webpack-cli -D2、新建webpack.config.js3、打包命令配置 npm run buildpackage.json文件中"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},二、基础属性1、enter 用来指定webpack的打包入口单入口：enter是一个字

1、热更新WDS （webpack-dev-server）npm i webpack-dev-server -D不刷新浏览器不输出文件，而是放在内存中使用 webpack内置的plugin插件 HMR – HotModuleReplacementPluginhot 如果热替换失败就会自动回退使用自动刷新，控制台错误信息被清除，hotOnly 不会使用自动刷新会影响文件指纹2、package.json文件 "scripts": { "test": "echo \"Err

1、变量默认值例题：// 第一种(function(a,b=1,c){ console.log(b) // null})(1, null, 3)// 第二种(function(a,b=1,c){ console.log(b) // 1})(1, undefined, 3)重新传从参，打印null变量默认为undefined，所以打印的是12、‘ ’ 与 new String()的区别例题：var str1 = 'a', str2 = new St

关键点：分析请求网址的精简（request / http）分析图片地址——正则匹配fs模块createWriteStream1、请求网址精简https://image.baidu.com/search/index?tn=baiduimage&word=网址2、分析图片地址http://img5.imgtn.bdimg.com/it/u=2577576757,3841266884&fm=26&gp=0.jpghttp://img3.imgtn.bdimg.com/

1、flex-direction属性（）flex-direction: row | row-reverse | column | column-reverserow（默认值）：主轴为水平方向，起点在左端row-reverse：主轴为水平方向，起点在右端column：主轴为垂直方向，起点在上沿column-reverse：主轴为垂直方向，起点在下沿2、flex-wrap属性（如果一条轴线排不下，如何换行）flex-wrap: nowrap | wrap | wrap-reverse

1、定义：虚拟DOM其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点， 实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM2、虚拟dom原理流程模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOMvuejs通过编译将模板（template）转成渲

1. 用nextTick()的原因：JS运行机制（Event Loop）JS执行是单线程的，它是基于事件循环的所有同步任务都在主线程上执行，形成一个执行栈。主线程之外，会存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件。当执行栈中的所有同步任务执行完后，就会读取任务队列。那些对应的异步任务，会结束等待状态，进入执行栈。主线程不断重复第三步。这里主线程的执行过程就是一个tick，而所有的异步结果都是通过任务队列来调度。Event Loop分为宏任务和微任务，无论是执行

场景需求：PC端点击授权按钮弹框提示立即绑定公众号生成二维码提供微信扫码授权PC端提示授权结果提示、微信公众号提示授权成功提示解决方案：利用qrcodejs2插件生成二维码（有容错率区别）需要实时调取接口返回授权绑定公众号是否成功setInterval定时器异步请求的回调反馈问题无法获取（利用Promise函数）插件引入使用方法可点击查看以往博客 点击这里1、view...

一、场景需求产品文档、原型等文件用的是SVN二、SVN的使用方法及常用命令1. 打开终端cd xxx 进入到需要存储的位置2. 将文件checkout到本地目录 （svn checkout xxx ）svn checkout svn://119.3.132.91/产品中心/版本3.0输入密码3. 往版本库中添加新的文件 （svn add xxx）svn add t...

场景需求：用户购买时添加引导关注公众号功能生成二维码并能长按识别（需要图片才能支持）解决方法：利用qrcodejs2插件生成二维码（canvas、table渲染不是image图片）利用canvas的一个方法toDataURL() 返回图片展示的 data URI实例化一个Image() ，存入src中即可插件引入使用方法可点击查看以往博客 点击这里1、views层&l...

场景需求：一个接口的参数会需要使用另一个接口获取两个接口同时请求完数据加载页面解决方案：（axios处理并发请求的助手函数）axios.all(接口1， 接口2)axios.spread(callback1, callback2)1、引入接口import axios from "axios"import {getSellerDetail} from '../../api/s...