共计 7389 个字符，预计需要花费 19 分钟才能阅读完成。
https://blog.csdn.net/kellywong/article/details/106430977
一，js 根本
1，数据类型：
JS 数据类型：JS 的根本类型和援用类型
根本类型（单类型）：String、Number、boolean、null、undefined。
援用类型：object。蕴含的 Array、function、Date。
null 和 undefined 有什么区别
undefined 是没有定义的，没有初始化，，null 是定义了然而为空，是不存在的对象。
判断数据类型：
typeof 不能辨别数组和对象，和 null
instanceof 在判断数组和 Data 很好用。判断是否是数组：Array.isArray(arr)。
Object.prototype.toString.call 能够判断根本类型和数组，对象
2，根本数据类型和援用数据类型区别：
1，内存的调配不一样，
2，参数传递不一样，根本类型数据值不会扭转；援用数据值会扭转旧对象，因为它传的值是内存援用的地址。
3，复制变量时，援用数据类型值可扭转，批改新对象会扭转旧对象；因为复制是内存援用地址，还是专用一块内存。
https://www.cnblogs.com/Mr-Rshare/p/11434186.html
3，闭包内存泄露解决方案，缩小内存泄露
1，定时器没有革除
2，意外的应用全局变量，window 对象的数据是不会回收的
3，闭包的应用，理解闭包的预期生命周期和用处
4，缩小过多的 console 打印，只打印必要的信息进去
4，Js 垃圾回收机制
垃圾回收机制：找出那些不再持续应用的变量，而后开释其占用的内存
JS 垃圾回收机制：采纳标记革除法，和援用计数
5，js 面相对象的继承有哪些办法
https://www.cnblogs.com/gaosirs/p/10637609.html
6，面向对象怎么实现重写，重载
7，js 怎么实现父办法一个参数调用一个办法，2 个参数调用另外一个办法
JavaScript 常见的设计模式
有哪些设计模式：设计模式是解决某个特定场景下的解决方案
创立型模式：工厂模式，单例模式，原型模式；构造模式：组合模式，代理模式。行为模式：观察者模式，迭代器模式，策略模式，访问者模式，开发者模式
订阅发布者模式：是一种音讯转递的机制，他由中间人对象，订阅者，发布者组成；订阅者接管音讯，发布者公布音讯。
原理：中间人对象定义一个数组，订阅办法，公布办法。订阅办法：往数组里保留回调函数；公布办法：遍历所有回调，进行调用，同时传入参数。
工厂模式：创立一个类，实现工厂办法，应用工厂办法创建对象。工厂模式将对象的创立和实现过程拆散。
单例模式：一个类只有一个实例，只能创立单个对象，单例类只有惟一的实例。并提供一个拜访它的全局拜访点。
原型模式：在原型上创建对象，能够节俭性能和内存空间，缩小反复代码。
观察者模式：它定义了一种一对多的关系，让多个观察者同时监听一个对象，被监听的对象状态产生扭转就会告诉所有观察者，这样就实现自动更新。
8，组件的传值
1，父传子：通过 props 传值，子传父：子组件通过 父组件传递的事件 newList，把值传给父组件
2，通过在组件定义 ref 的援用，就能够拿到子组件数据和办法 来传值
3，跨级传递：应用 useContext 来传值；
3.1 用 provide(povd) / inject 依赖注入，跨层级间接向子组件传递数据：provide 定义一个变量，通过 inject 来接管。
3.2 订阅发布者模式也能够传参
4，路由地址栏参数拼接也能够传参
5，Vue 地方总线池也能够传参；vuex 状态共享也能够传参。
9，react 和 vue 的区别及优缺点
1，Vue 的思维是响应式的，基于数据可变的。
1.1 模板写法不一样，vue 反对在 html 里写 Css 和 js, 操作 Dom 不便。还有指令 if, v-for,
长处: 入门容易，开源组件丰盛，框架功能完善，文档较为具体，毛病: 插件引入不够标准，代码提醒变弱，不利于保护。2，react 整体是函数式的思维，数据不可变，单向数据流。
2.2 通过 js 来操作所有，模板写法在 js 里写 html 和 css，
长处: 框架功能强大，非常灵活，设计十分标准，开发理念清晰，
毛病: 代码有些繁琐，抉择表达式，父子状态不同步，须要本人写回调同步状态。因为太灵便，容易导致我的项目凌乱。
10，vue 中 keys 的作用是什么
Keys 是惟一标识
1，在渲染的时候，会把新 dom 和旧 dom 进行比照，如果 dom 统一，就会间接用旧 dom，不便追踪元素，比对元素。
2，应用 key 值能够给 dom 增加一个 惟一标识符，让 vue 强制更新 dom。
所以 key 的作用：能够晋升渲染性能，缩小元素从新渲染，还能够防止数据渲染异样。
key 值在哪些地方用到过，除了 v -for 循环遍历的时候
1,v-for 语句中应用
2, 雷同父元素下的子元素能够应用 key
3, 利用 key 一旦更改元素就会销毁从新创立的个性，实现强制替换元素 或触发残缺的生命周期钩子
4, 在从新渲染的时候更快，能够用来管制组件刷新
11，为什么虚构 dom 会进步性能(必考)
虚构 dom 相当于在 js 和实在 dom 两头加了一个缓存，利用 js 算法对 dom 进行比对，防止了没有必要的 dom 操作，从而进步性能。用 JavaScript 对象构造示意 DOM 树的构造；而后用这个树构建一个真正的 DOM 树，插到文档当中当状态变更的时候，从新结构一棵新的对象树。而后用新的树和旧的树进行比拟，记录两棵树差别把 2 所记录的差别利用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。
二，webpack
1，loader 是什么，有什么用：loader 和 plugin 区别
是 webpack 用于在编译时解析各类文件格式，并输入来，比方：解析 css-loader，sass-loader，babel-loader
Plugin 是什么：
是 webpack 用于在编译过程中利用钩子进行自定义函数，实现编译过程的可控，而 Plugin 用在解析模板文件，压缩代码，css 压缩，打包 zip 包
2，webpack 常见性能优化
. 缩小不必要的模块依赖
. 缩小不必要的 loader 解决
. 应用 cache-loader 进行缓存文件, 缓存 loader
. 开启多线程打包
. 代码压缩
https://blog.csdn.net/Mr_RedStar/article/details/123462435
如果拿到一个上线我的项目想要优化，从什么中央开始着手
1，首屏进入增加 loading，
2，html 优化
删除不必要的正文，应用语义化标签，缩小 dom 的层级，缩小重排。
3,javaScript 优化
将 javaScript 脚本放到页面底部，正当的 ajax 申请，应用懒加载，代码构造优化，4，css 优化
css 文件压缩，css 层级嵌套不要太多，删除无用的 css，异步加载非首屏 css
5，图片优化
图片压缩，小图片合成雪碧图 缩小 http 申请，采纳 svg 和 base64 类型图片6，webpack 构建优化
缩小反复和不须要的依赖，缩小不必要的 loader 解决，模块懒加载，配置压缩 css 和 js 代码。3，webpage 配置什么把 es6 的代码转为 es5
装置 babel-loader 就能够
4，css 工程化
CSS 工程化：将代码层次化，容易看出嵌套关系；精简代码，提高效率。
个别应用 SASS 和 LESS 来实现工程化
SASS：个别应用变量，嵌套，混合，继承等性能
三，vue
1，生命周期
vue 中的 create(克 rt) 和 mount 的区别
create 是初始化阶段，此阶段是数据观测，还没有生成 dom，所以无奈获取操作 dom
mount 挂载实在 dom，能够操作 dom 节点
1，keep-alive 作用
keep-alive 能够使组件活着保留状态，防止从新渲染。一旦应用 KeepAlive 时 mouted 等生命周期钩子只会第一次进入时调用，当前就不会调用。缩小反复发送申请的
2，vue 之 mixin 的作用是什么，原理，有什么优缺点。
vue 的 mixin(混入)就是混入代码
vue 之 mixin 定义：非常简单，它就是一个对象而已，对象蕴含 vue 组件常见配置，如 data,created,mounted。
vue 的 mixins(混入) 是一种将可复用代码和逻辑提取进去，哪个组件须要用时，注入到组件中的形式。通过 mixins，能够将一些常见的性能和逻辑抽离进去，不便在多个组件中重复使用。
作用：防止代码反复，实现可复用性能；保护不便，只须要批改一个中央。
长处：进步代码复用，无需传递状态，保护不便。
毛病：存在同名变量和办法，会被组件里变量笼罩。命名抵触，滥用前期很难保护，不好追溯原
代替计划：很多时候要思考用公共组件还是用 mixin(混入)
3，vue 插槽是什么，slot 插糟有什么作用
插槽就是在组件标签两头，预留了一个地位，书写 dom 内容，利用插槽把里面写的 dom 传到组件里，并将组件里的内容替换掉 传入的 dom
插槽有默认插槽，和具名插槽；具名插槽：依据插槽名来插入内容。
作用：是为了不便给子组件传入 dom。如果一个场景：有 5 个页面，这 5 个页面只有一个区域的内容不一样，你会怎么去写这个 5 个页面，复制粘贴是一种，在 vue 中插槽 (slot) 是更好的做法。
3.1，react 组合，实现 vue 插槽性能
通过一个办法传入不同的参数，调用这个办法，而后把子组件当参数传进去，传入不同的子组件就显示不同 html
4，本人实现过 hooks 吗
自定义 Hook 是一个函数，其名称以“use”结尾，封装一些逻辑，能够复用缩小代码冗余，函数外部能够调用其余的 Hook。
6.1, 用于解决字符串(url)；数据格式化(日期)；单位转换
5，vue 数据双向绑定
https://blog.csdn.net/weixin_45410795/article/details/117636493
1.1，简略的双向绑定：定义一个数据状态值，绑定到 value 属性上，通过定义一个事件，如 input 事件，来管制扭转这个数据值，当咱们在 input 框里输出值，它的 data 外面的值就会变成什么
相当于应用 v -model，等价于咱们去绑定了:value 和 @input。
1.2，往深的说：当创立一个 Vue 实例时，将遍历所有 DOM 对象，并为每个数据属性增加了 get 和 set。get 和 set 容许 Vue 察看数据的更改并触发更新。
双向数据绑定原理
第一步视图变动更新数据，用户通过 input 输入框触发数据的变动。
第二步数据变动更新视图，那么问题来了：data 数据变动时怎么去更新相干的视图？
vue 采纳数据劫持的形式来做数据绑定的，通过 Object. Define(滴凡)Property(怕破挺)()来劫持属性给属性设置 set，get，在 set 和 get 中增加一些更新数据的办法，就可能实现数据更新到视图。
还须要几个操作:
须要一个监听器 observer, 须要一个订阅器 dep, 须要一个订阅者 watcher
v-model 数据 打印的数据跟页面显示不同步，这个怎么解决
当咱们在 vue 中用 v -model 绑定一个变量时，实际上基于组件外部的 value 和 input 事件主动创立了一个双向绑定。
然而 vue 并不会为组件外部对象或数组主动创立响应式属性，这导致批改一般对象和数组，并不会触发 v -model 绑定的数据，
这时须要手动通知 vue 某个属性批改了，vue 提供了 $set 办法来解决
6，如何实现单页面利用，实现 vue 路由
路由有两种模式，hash 哈希模式，history(histr)模式
通常 url 地址前面有哈希值，当哈希值扭转时，利用浏览器的 onhashchange()事件监听，来管制组件的显示和暗藏。就能够实现路由不刷新跳转
7，vue 路由守卫
vue-router 提供的导航守卫，次要对路由跳转进行监测，管制他跳转或勾销。次要作用是：如果某个页面没有受权就不能进入，就要重定向到登入页面
router.beforeEach((to, from) =>{next}) 有 to, from, next() 3 个参数
8，vue 路由实现的原理
路由是实现页面跳转，页面的显示和暗藏性能。
在 vue 中利用 defineProperty 数据劫持在原型上初始化一些 getter 属性，蕴含 router 信息。
当 router 触发 setter 办法时，就会告诉组件。
在初始化的时候，会判断要挂载路由的模式，是 hash 还是 history，再调用 hashchange 办法，更新路由从新渲染。
9，路由懒加载
作用：是首屏加载没必要加载整个我的项目文件，路由懒加载就能够实现只加载，以后页面所须要的组件和代码；把路由宰割开来。
只须要把导入组件的形式，改为动静导入
10，vue-router 的原理
1. 监听 url 的变动，2，匹配路由规定，3，渲染组件。
vue-router 还提供 $router.push()和 $router.replace()跳转和替换
四，
1，什么叫事件冒泡，事件捕捉
vue-devtools 利用
2，vue 合成事件和原生事件有什么区别
合成事件机制：React 并不是将 click 事件间接绑定在 dom 下面，而是采纳事件冒泡的模式冒泡到 document 下面，
在 document 处监听所有事件，将事件内容封装并交由处理函数运行。这样缩小了内存的耗费
3，vue diff 算法, vue diff 和 react diff 有什么不同
用 Js 对象构造示意 DOM 树的构造；而后用这个树构建一个真正的 DOM 树，插到文档当中
当状态变更的时候，从新结构一棵新的对象树。而后用新的树和旧的树进行比拟 (diff)，记录两棵树差别
把差别的局部构建的真正的 DOM 树上(patch)，视图就更新了
diff 算法是通过对同层的树节点进行比拟，这样复杂度就很低
5，vue2.0 和 vue3.0 的区别
1. 性能比 2.x 快 1.2～2 倍，在 vue3 中，diff 算法的优化，减少了动态标记，缩小了虚构 dom 比对
重构了响应零碎：应用代理替换 object.defineProperty，能够间接监听数组类型的数据变动
2, 按需编译，体积比 Vue2.x 更小
3, 组合 API，将逻辑雷同的代码放在一起，不便反复利用
4, 更好的 TS 反对，vue2 不适宜应用 ts
5, 更先进的组件
vue3.0：https://juejin.cn/post/6955129410705948702
7，vue 自定义指令及原理
vue.directive 定义一个指令，vue 自定义指令相当于本人封装的一个函数办法，不便在其余中央调用
9，判断对象是否为空
var arr = Object.keys(data);
alert(arr.length == 0); //true 为空，false 不为空
var b = (JSON.stringify(data) == "{}");
alert(b); //true 为空，false 不为空
10, 对象的遍历
objet.key().map()
for(let key in obj){console.log(key, obj[key])
} for in 和 for of 的区别
1.1，for in 用来遍历对象，在遍历对象时还会遍历原型上的属性。会导致性能降落。遍历对象还能够用:Object.keys()
1.2，for of 用来遍历有序构造数据：数组，字符串，dom 列表，map, set。不能遍历对象。
1.3，for in 能够遍历数组，然而失去是下标，并不是数组元素。
const obj1 = {name:'joy',sex:'male'}
for (let key in obj1) {if(obj1.hasOwnproperty(key)) {console.log(key, obj1[key])
}
}
const arr = [1,2,3]
for(let value of arr) {console.log(value)
}ES6 的高阶函数: 高阶函数，如 map，reduce，filter
// 新的写法: filter / map / reduce
// filter 中的回调函数有一个要求：必须返回一个 bollean 值
// true : 当返回 true 时，函数外部会主动将这次回调的 n 退出到新的数组中
// false: 当返回 fasle 时，函数外部会过滤掉这次的 n。let new_nums = nums.filter(function (n) {return n < 100})
// map 映射函数
let new_nums1 = new_nums.map(function (n) {return n * 3})
// reduce(func(上一次后果 初始值为默认值，数组的 n), 默认值 =0) 对数组中所有的内容进行汇总。let new_nums2 = new_nums1.reduce(function (prev,n){return prev + n},0)
// 或者能够写成
let new_writeNums = nums.filter(function (n){return n < 100}).map(function(n){return n * 3}).reduce(function(prev,n){return prev + n},0)11，BFC 是什么，有什么用，如何实现
BFC 直译为 ” 块级格式化上下文 ”。它是一个独立的渲染区域，
作用：革除浮动，实现自适应布局
12，如何实现 12px 以下字体
应用 transform: scale(.95) 应用图片
13，如何优化 scale 含糊
给缩放代码加上 transform:translate3d(0,0,0)
因为不够怯懦错失过什么
https://www.douban.com/gallery/topic/308797/?from=discussing&…
生存中的“I”时刻
https://www.douban.com/gallery/topic/346273/?from=discussing&…
你如何维持情绪稳定
https://www.douban.com/gallery/topic/306654/?from=discussing&…
https://www.douban.com/gallery/topic/312948/?from=discussing&…
放弃高效的学习办法
https://www.cnblogs.com/xiao2shiqi/p/15401920.html
