一.当v-for中key相同时，vue如何判断，如何渲染

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

首先要知道Vue以及React都使用了虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而他们都是通过diff算法来对比虚拟DOM前后的变化，从而更新节点。在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。
当页面的数据发生变化时，Diff算法只会比较同一层级的节点：

如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点。

如果节点类型相同，则会重新设置该节点的属性，从而实现节点的更新。

总而言之，key的作用主要是为了高效的更新虚拟DOM 。

为什么不用index作为key呢，是因为，如果在一个v-for list里面，删除中间的一个item，这个时候这个item后面所有的index都会变化，那么diff就会计算出后面的item的key-index映射都发生了变化，就会全部重新渲染，大大影响了性能。而且这也会导致一些bug，比如当删除了item2的时候，再选中item3就会变成选中item4。
二.instanceof 判断数组及

或判断某个变量是否是某个对象的实例则要选择使用instanceof。instanceof用于判断一个变量是否某个对象的实例，如var a=new Array();alert(a instanceof Array);会返回true，同时alert(a instanceof Object)也会返回true;这是因为Array是object的子类。再如：function test(){};var a=new test();alert(a instanceof test)会返回true
原型链
https://www.jianshu.com/p/0710d73fa3ea
三.baseurl 和 publicPath 的区别
axios.defaults.baseURL = 'http://xxxi.com/'; baseURL用于调用后端接口
Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
四.data 生命中，写箭头函数有什么问题
箭头函数的作用域是和父级绑定一起的，function this是谁调用指向谁的
data: () => {} this指向undefined的时候，是会赋值给vm._data，但是他会相当于一个全局的，只要你不刷新页面他就会缓存你的data。
如果我们使用data() {}this指向Vm实例，所以他会随着实例更新。
五.elemen-ui的一件换肤如何实现
本方法就是最常见的换肤方式，本地存放多套主题，两者有不同的命名空间，如写两套主题，一套叫 day-theme ，一套叫 night-theme ，night-theme 主题都在一个 .night-theme 的命名空间下，我们动态的在 body 上 add .night-theme ; remove .night-theme。
修改代码如下

  document.body.dataset.theme = 'default-theme'

六.$set原理
1、如果是在开发环境，且target未定义（为null、undefined）或target为基础数据类型（string、boolean、number、symbol）时，抛出告警；

2、如果target为数组且key为有效的数组key时，将数组的长度设置为target.length和key中的最大的那一个，然后调用数组的splice方法（vue中重写的splice方法）添加元素；

3、如果属性key存在于target对象中且key不是Object.prototype上的属性时，表明这是在修改target对象属性key的值（不管target对象是否是响应式的，只要key存在于target对象中，就执行这一步逻辑），此时就直接将value直接赋值给target[key]；

4、判断target，当target为vue实例或根数据data对象时，在开发环境下抛错；

5、当一个数据为响应式时，vue会给该数据添加一个ob属性，因此可以通过判断target对象是否存在ob属性来判断target是否是响应式数据，当target是非响应式数据时，我们就按照普通对象添加属性的方式来处理；当target对象是响应式数据时，我们将target的属性key也设置为响应式并手动触发通知其属性值的更新；

七.实现双向绑定的多种方式
手动绑定
比较老的实现方式，有点像观察者编程模式，主要思路是通过在数据对象上定义get和set方法(当然还有其它方法)，调用时手动调用get或set数据，改变数据后出发UI层的渲染操作；以视图驱动数据变化的场景主要应用与input、select、textarea等元素，当UI层变化时，通过监听dom的change，keypress，keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成
以典型的mvvm框架angularjs为代表，angular通过检查脏数据来进行UI层的操作更新。关于angular的脏检测，有几点需要了解些： - 脏检测机制并不是使用定时检测。 - 脏检测的时机是在数据发生变化时进行。 - angular对常用的dom事件，xhr事件等做了封装， 在里面触发进入angular的digest流程。 - 在digest流程里面， 会从rootscope开始遍历， 检查所有的watcher。 （关于angular的具体设计可以看其他文档，这里只讨论数据绑定），那我们看下脏检测该如何去做：主要是通过设置的数据来需找与该数据相关的所有元素，然后再比较数据变化，如果变化则进行指令操作
给object追加属性，不会被监听
3、前端数据劫持(Hijacking)
第三种方法则是avalon等框架使用的数据劫持方式。基本思路是使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以了。

八.class多继承，如何查找继承哪个父类

参考

https://www.jianshu.com/p/0710d73fa3ea

九.如何修改vue源码，能监听到array index 变化
在Object.defineProperty 加入writable: true 属性，监听 value属性

function def (obj, key) {
  Object.defineProperty(obj, key, {
    writable: true,
    enumerable: true,
    configurable: true,
    value: function(...args) {
      console.log('key', key);
      console.log('args', args); 
    }
  });
}
 
// 重写的数组方法
let obj = {
  push() {}
}
 
// 数组方法的绑定
def(obj, 'push');
 
obj.push([1, 2], 7, 'hello!');

十vue如何对大数据劫持进行优化
1, 减少无用字段
2.数据扁平化
3.数据静态化 放入beforeCreated中

十一微任务耗时长，会不会影响页面渲染

十二如何实现事件委托
1、在document上兼容所需要的事件类型，比如mouse事件、touch、focus事件等。
2、事件在document上触发的时候，获取event.target 到 document的路径
3、递归调用targetDom =event.target; targetDom = targetDom.parentNode，直到相关的元素和ele1及ele2匹配上。
4、 触发事件callback.apply(targetDom,event);

13.splice和slice的返回值
slice(start,end) 从哪到哪开始删
splice(strt,end,index1,index2) 从什么位置开始，删几个？删了后插入什么新元素？
Array.slice()返回Array -- 一个由原始数组中某一范围的元素构成的数组。
Array.splice()返回Array -- 包含从原始数组中删除的元素的一个数组。

14.flex 0 0 1 是什么含义
flex-grow,flex-shrink,flex-basis3个属性结合在一起的缩写形式,后两个属性可选写
flex-grow
表示当子元素的空间小于父元素的空间时,如何处理剩余空间,
默认值为0表示不占有剩余空间;
当子元素都设置为1时表示平均分配剩余空间;
当一个子元素为2其余子元素为1时为2的子元素占据的剩余空间比其他子元素多一倍;
当一个子元素为1其余子元素为0,为1的子元素占据全局剩余空间

felx-shrink
表示当子元素的空间大于父元素的空间时,如何缩小子元素
默认值为1表示等比缩小
当所有子元素都设置为1时所有子元素都会等比例缩小
当一个子元素为0其余子元素为1是表示为0的子元素不缩小,其余元素缩小

flex-basis
用于设置项目占据的主轴空间,设置为auto表示项目占据的主轴大小等于项目的实际内容大小,设置为固定值表示项目占据的主轴大小等于固定值

15.骨架屏
指的是在数据没有渲染完之前，先显示出占地的样式
class追加名
使用流行工具awesome-skeleton

16.服务端渲染
后端返回html
更有利于sso
vue实现
npm install vue vue-server-renderer --save

17.pwa
PWA（渐进式Web应用程序）是一种使用各种技术来增强Web应用程序功能的理念，它可以使网站体验更好并模拟一些本机功能，例如通知推送、在移动端使用标准化框架，Web应用程序具有与本机应用程序类似的体验
18.手写二分查找
1、先从有序数组的最中间元素开始查找，如果和要查找的元素相等，直接返回索引，若不相等则下一步。
2、如果指定的元素大于或者小于中间元素，则在大于或小于的那一半区域内查找，重复第一步直到找到目标元素。

image.png

19.js内存回收机制
vue如何实现双向绑定，vue2双向绑定的缺点

20.原型和原型链
一、原型
①所有引用类型都有一个proto(隐式原型)属性，属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
③所有引用类型的proto属性指向它构造函数的prototype
http与https ，三次握手

手写new函数
新生成一个对象
将构造函数的作用域赋值给新对象（即绑定新对象的 this）
执行构造函数中的代码（即为这个新对象添加属性）
返回新对象

function _new() {
// 创建一个新对象
let newObj = {};
// 获取构造函数
let Constructor = Array.prototype.shift.call(arguments);
// 连接新对象原型，新对象可以访问原型中的属性
newObj.proto = Constructor.prototype;
// 执行构造函数，即绑定 this，并且为这个新对象添加属性
Constructor.apply(newObj, arguments);
// 返回该对象
return newObj;
}

21.bfc原理，如何画三角形
通过
border-top: 100px solid cyan;
border-left: 50px solid transparent;
border-right: 50px solid transparent;

22.手写任务对列
https://www.jianshu.com/p/0d9f04e30e89

23.深拷贝
https://www.jianshu.com/p/c0f589449a76

24.vue keep-alive
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

25.vue 组件之间的通信方式
props和attrs和emit on
v-model
provide和inject
children
vuex
26.vue 的生命周期、

image.png

vue beforeCreated里 data和元素
不能获取，最早获取到data的生命周期是created中。
此时的数据观察和事件机制都未形成，不能获得DOM节点
vue 为什么data里面 是函数，为什么new Vue 不用
从上面可以了解到，vue组件就是一个vue实例。

JS中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的方法或属性。vue的data数据其实是vue原型上的属性，数据存在于内存当中。vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。

因为使用对象的话，每个实例（组件）上使用的data数据是相互影响的，这当然就不是我们想要的了。对象是对于内存地址的引用，直接定义个对象的话组件之间都会使用这个对象，这样会造成组件之间数据相互影响。

以上两个实例都引用同一个对象，当其中一个实例属性改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会互相干扰。

vue的事件修饰符
.stop 阻止事件向上(向父级)冒泡
.capture 在捕获阶段触发监听函数
.self 表示事件只由本身触发，不是来自子节点
.once 事件将只会触发一次
prevent 是拦截默认事件
.passive 是不拦截默认事件

vuex都有啥
state 状态数据
getters 可以认为是store的计算属性
mutations //存放同步函数方法
mouled
actions//存放异步函数方法

         //async异步
        async getTodos({commit}) {
            const result = await axios.get('http://jsonplaceholder.typicode.com/todos?_limit=10');
            commit('updateState', result.data);
        },
        //Promise异步
        fetchTodos({commit}, params) {
            return new Promise((resolve, reject) => {
                fetch('http://jsonplaceholder.typicode.com/todos?_limit=5')
                    .then(res => res.json())
                    .then(data => {
                        commit('setState', data)
                        reject(data)
                    })
                    .catch(err => reject(err)); //抛出错误回调
            });
        }

watch 和complute得区别
计算属性computed :

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
   3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
3. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
   5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

watch

1.不支持缓存，数据变，直接会触发相应的操作；
2.watch支持异步；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4.当一个属性发生变化时，需要执行对应的操作；一对多；
5.监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
immediate：组件加载立即触发回调函数执行，
deep:深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

typeof 和instanceof的区别
用于判断数据类型，返回值为6个字符串，分别为string、Boolean、number、function、object、undefined。
instanceof
instance中文翻译为实例，因此instanceof的含义就不言而喻，判断该对象是谁的实例，同时我们也就知道instanceof是对象运算符。
这里的实例就牵扯到了对象的继承，它的判断就是根据原型链进行搜寻，在对象obj1的原型链上如果存在另一个对象obj2的原型属性，那么表达式（obj1 instanceof obj2）返回值为true；否则返回false。

null 和unfined的区别 Number会返回啥
Number(null)
0
Number(undefined)
NaN

箭头函数和function区别
构造函数
function Person(name, age){
this.name = name;
this.age = age;
}
var lenhart = new Person(lenhart, 25);
console.log(lenhart); //{name: 'lenhart', age: 25}
this指针
由于js的内存机制，函数声明的时候存在变量提升，

块级元素和行级元素的转换
高端塌陷 去浮动
对父级设置适合CSS高度
对父级设置适合高度样式清除浮动，这里对“.divcss5”设置一定高度即可，一般设置高度需要能确定内容高度才能设置。这里我们知道内容高度是100PX+上下边框为2px，这样具体父级高度为102px
父级div定义 overflow:hidden
父级div定义 overflow:hidden
webpack分离chunk
vue怎么检测对象变化
js继承
async/await以及对Generator的优势
async await 是用来解决异步的，async函数是Generator函数的语法糖
使用关键字async来表示，在函数内部使用 await 来表示异步
async函数返回一个 Promise 对象，可以使用then方法添加回调函数
当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句
async较Generator的优势：
（1）内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样
（2）更好的语义。async 和 await 相较于 * 和 yield 更加语义化　　
（3）更广的适用性。yield命令后面只能是 Thunk 函数或 Promise对象，async函数的await后面可以是Promise也可以是原始类型的值
（4）返回值是 Promise。async 函数返回的是 Promise 对象，比Generator函数返回的Iterator对象方便，可以直接使用 then() 方法进行调用

js内置对象
Array对象、Date对象、正则表达式对象、string对象、Global对象
js基本类型
undefined，boolean，number，string，null

100%和auto的区别
auto是随内容的高度而撑开的。100%是根据父级元素的高度来决定的。
俩个数组找差

除了webpack其他打包工具

vue route 的区别
1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

举例：history对象

$router.push({path:'home'});本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录

方法：

$router.replace({path:'home'});//替换路由，没有历史记录

2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

我们可以从vue devtools中看到每个路由对象的不同

wepack如何优化打包
一、DLL方式
DLL方式就是通过配置，告诉webpack指定库在项目中的位置，从而直接引入，不将其打包在内
DLL方式就是指定包在的项目中，build的时候不在打包对应的包，使用的时候引入。
webpack通过webpack.DllPlugin与webpack.DllReferencePlugin两个内嵌插件实现此功能
const webpack = require('webpack');
module.exports = {
entry: {
bundle: [
'react',
'react-dom',
//其他库
],
},
output: {
path: './build',
filename: '[name].js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: './build/bundle.manifest.json',
name: '[name]_library',
})
]
};
二、Happpypack 用来加速代码构建
Happypack 在编译过程中，除了利用多进程的模式加速编译
增强代码代码压缩工具
三 Webpack 默认提供的 UglifyJS 插件，由于采用单线程压缩，速度颇慢 ；推荐采用 webpack-parallel-uglify-plugin 插件，她可以并行运行 UglifyJS 插件，更加充分而合理的使用 CPU 资源，这可以大大减少的构建时间；当然，该插件应用于生产环境而非开发环境，其做法如下，
四 设置 noParse

ast概念
es7转es5
loader的封装机制
浏览器获取html 加载顺序css 和js 谁先，一起会有啥问题
1.js放在head中会立即执行，阻塞后续的资源下载与执行。因为js有可能会修改dom，如果不阻塞后续的资源下载，dom的操作顺序不可控。

正常的网页加载流程是这样的。

浏览器一边下载HTML网页，一边开始解析
解析过程中，发现<script>标签
暂停解析，网页渲染的控制权转交给JavaScript引擎
如果<script>标签引用了外部脚本，就下载该脚本，否则就直接执行
执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页
　　如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。html需要等head中所有的js和css加载完成后才会开始绘制，但是html不需要等待放在body最后的js下载执行就会开始绘制,因此将js放在body的最后面，可以避免资源阻塞，同时使静态的html页面迅速显示。将脚本文件都放在网页尾部加载，还有一个好处。在DOM结构生成之前就调用DOM，JavaScript会报错，如果脚本都在网页尾部加载，就不存在这个问题，因为这时DOM肯定已经生成了。

2.js的执行依赖前面的样式。即只有前面的样式全部下载完成后才会执行js，但是此时外链css和外链js是并行下载的。

css需要分块，首页的css独立，其余的css需要动态加载，因为html的绘制会被css阻塞，这样可以减少首次进入时的白屏时间。

3.外链的js如果含有defer="true"属性，将会并行加载js，到页面全部加载完成后才会执行，会按顺序执行。

defer属性的作用是，告诉浏览器，等到DOM加载完成后，再执行指定脚本。

浏览器开始解析HTML网页
解析过程中，发现带有defer属性的script标签
浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本
浏览器完成解析HTML网页，此时再执行下载的脚本
　　对于内置而不是连接外部脚本的script标签，以及动态生成的script标签，defer属性不起作用。

4.外链的js如果含有async="true"属性，将不会依赖于任何js和css的执行，此js下载完成后立刻执行，不保证按照书写的顺序执行。因为async="true"属性会告诉浏览器，js不会修改dom和样式，故不必依赖其它的js和css。

async属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染。

浏览器开始解析HTML网页
解析过程中，发现带有async属性的script标签
浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本
脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本
脚本执行完毕，浏览器恢复解析HTML网页
　　async属性可以保证脚本下载的同时，浏览器继续渲染。需要注意的是，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。另外，使用async属性的脚本文件中，不应该使用document.write方法。

一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。
wepack基本原理
postion都有啥
css水平居中怎么设置
bfc规范
map和forEach的区别，返回值
map Es6新特性

事件循环
vue render的优点
minnxs 的弊端
extend的用法
路由的俩种模式 hash 和history
vuex的实现
前端性能优化

image.png

css3新特性

vue 路由传值俩种方式

语义化标签

哪些操作触发重绘

从输入url，都做了什么

如何缩短首屏时间

重绘
promise的三种状态
promise理解

webpack 打包多
module.exports = {
//...
output: {
filename: '[name].[hash].bundle.js',
chunkFilename: '[name].[hash].chunk.js',
}
};
webpack loader和插件区别
【Loader】：用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，Style-Loader等
【Plugin】：目的在于解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。webpack提供了很多开箱即用的插件：CommonChunkPlugin主要用于提取第三方库和公共模块，避免首屏加载的bundle文件，或者按需加载的bundle文件体积过大，导致加载时间过长，是一把优化的利器。而在多页面应用中，更是能够为每个页面间的应用程序共享代码创建bundle。
loader原理
webpack原理
　　本质上，webpack 基于node平台，利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具。
　　在打包过程中，构建依赖关系，并且实现模块引用预处理，以及缓存等。

手写promise promise.all
v-if和v-show得区别，tab页签用啥
wevapck 多 chunk
Chunk是Webpack打包过程中，一堆module的集合。我们知道Webpack的打包是从一个入口文件开始，也可以说是入口模块，入口模块引用这其他模块，模块再引用模块。Webpack通过引用关系逐个打包模块，这些module就形成了一个Chunk。
如果我们有多个入口文件，可能会产出多条打包路径，一条路径就会形成一个Chunk。出了入口entry会产生Chunk，还有两种途径，下面会有介绍。

entry: {
main: './src/js/main.js',
other: './src/js/other.js'
},
output: {
// path: __dirname + "/public",
// filename:'bundle.js'
// 以上2行会报错

path: __dirname + "/public",//打包后的文件存放的地方
filename: "[name].js", //打包后输出文件的文件名

}

webpack 多entry

image.png

代码分割
module.exports = {
entry: {
main: __dirname + "/app/main.js",
other: __dirname + "/app/two.js",
},
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "[name].js", //打包后输出文件的文件名
chunkFilename: '[name].js',
},

  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: "initial",
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0 // This is example is too small to create commons chunks
        },
        vendor: {
          test: /node_modules/,
          chunks: "initial",
          name: "vendor",
          priority: 10,
          enforce: true
        }

      },
    }
  }
}