前端高级面试（vue+es6+js）??以下内容仅代表个人观点，如有错误请指正~Vue双向绑定原理：vue.js利用数据劫持结合publisher-订阅者模式，通过Object.defineProperty()劫持各个属性的setter和getter，当数据发生变化时向订阅者发布消息，并触发相应的监听回调。扩展：*Object.defineProperty()是ES5中不能shimmed的特性，这也是Vue不支持IE8及以下浏览器的原因。*Object.defineProperty(object,property,propertydescriptor)用于在一个对象上定义一个新的属性，或者修改一个对象已有的属性，并返回这个对象来实现：通过Object.defineProperty()监听数据属性的变化，递归遍历数据对象，包括子属性对象的属性，添加setters和getters。详细解释：*实??现一个监听器Observer：给一个对象赋值==>触发一个setter（监听数据变化）==>通知订阅者（notify（调用订阅者的update方法））*实现一个订阅者Watcher：它可以接收到属性变化的通知，执行相应的函数来更新视图。(getter(constdep=newDep();thenemptytoreduceperformancewaste))*实现一个parserCompile：可以扫描并解析各个节点的相关指令，根据初始化模板数据初始化对应的订阅者。什么手表|计算机有一个共同点：希望当数据发生变化时，数据会按照预先定义的函数“自动”发生变化。区别：watch擅长处理的场景：一个数据影响多个数据Computed擅长处理：一个数据受多个数据影响Componentparenttochild传值：ref$refParenttochild：propsChildtoparent：$emitSiblingcomponent:$onGeneral:Utilizecache(storelocationstragebackend....)Extension:vue监听子组件生命周期//Parent.vue//Child.vuemounted(){这个.$emit("mounted");}或者保活原理：Vue的缓存机制不直接存储DOM结构，而是将DOM节点抽象为VNodes节点。因此，Vue的保活缓存也是基于VNode节点，而不是直接存储DOM节点。用法：是Vue的内置组件，可以在组件切换时保持状态在内存中，防止重复渲染DOM。包括：字符串或正则表达式。只有匹配的组件才会被缓存。排除：字符串或正则表达式。任何匹配的组件都不会被缓存。max：最多几个（vue2之前无效）v-ifv-forv-for的使用优先级高，所以不建议同时使用。上层dom可以使用v-ifrouting(hash|history+routingguard)hash:指url尾部的#号和后面的字符。window.location.hash获取hash值history：window.history（可以直接写成history）指向History对象，代表当前窗口的浏览历史。路由保护全局router.beforeEach((to,from,next)=>{//...})router.afterEach((to,from)=>{//...})Route-only保护constrouter=newVueRouter({routes:[{path:'/foo',component:Foo,beforeEnter:(to,from,next)=>{//...}}]})在组件beforeRouteEnterbeforeRouteUpdate(new2.2)beforeRouteLeavevirtualdom优化缺点什么是virtualdom：用js模拟一棵dom树，放在浏览器内存中。当要改变时，虚拟dom使用diff算法比较新旧虚拟dom，将改变放入改变队列，反映到实际的dom树上，减少dom操作。虚拟DOM将DOM树转化为JS对象树，diff算法逐层进行比较、删除、添加操作。但是，如果有多个相同的元素，可能会浪费性能。因此，react通过引入键值来区别于vue-for。优点：*虚拟DOM具有批处理和高效的Diff算法，最终对DOM的修改只是变化的部分，可以保证很高的高效渲染，优化性能。缺点：*性能较差（虽然虚拟DOM+合理优化足以满足大部分应用的性能需求，但在一些对性能要求极高的应用中，无法针对虚拟DOM进行极致优化）*渲染大量DOM时第一次，由于额外计算了一层虚拟DOM，它会比innerHTML插入慢。es6promise实现：*1.newPromise时，需要传递一个执行器，执行器立即执行*2.执行器接受两个参数，即resolve和reject*3.一个promise只能从pending到rejected，或者从pendingtofulfilled*4.一旦promise的状态被确认，就不会再改变*5.Promise有一个then方法，然后接收两个参数，分别是回调onFulfilled,*和成功回调onRejected*ofthepromise*6.如果调用Whenthen，promise已经成功，执行onFulfilled并将promise的值作为参数传递。*如果promise失败，执行onRejected，并将promise失败的原因作为参数传递。*如果promise的状态是pending，需要存储onFulfilled和onRejected函数，等待状态确认，然后依次执行相应的函数（发布和订阅）*7.onFulfilled和onRejected的参数then可以默认*8.promise可以then多次，promise的then方法返回一个promise*9.如果then返回一个结果，这个结果会作为参数传给成功回调（onFulfilled）nextthen*10.如果then中抛出异常，异常会作为参数传递给nextthen的失败回调(onRejected)*11.如果then返回一个promise，那么需要等待promise，并且然后等待承诺被执行。*如果promise成功，则转到next的成功，如果失败，则转到next的失败使用：先执行getData1，再执行getData2letgetData1=newPromise(function(resolve,reject){$.ajax({type:"get",url:".../getData1",success:function(data){if(data.state=="200"){resolve(data.data)//异步时调用操作成功}else{reject(data.msg);//异步操作失败时调用}}});})letgetData2=newPromise(function(resolve,reject){$.ajax({type:"get",url:".../getData2",success:function(data){if(data.state=="200"){resolve(data.data)//异步操作成功时调用}else{reject(data.msg);//异步操作失败时调用}}});})getData1.then(function(res){ returngetData2(res)}).then(function(res){ console.log(res)}).catch(function(err){ console.log(err)})先执行getData1和getData2，执行完getData3后让getData3=newPromise(function(resolve,reject){$.ajax({type:"get",url:".../getData3",success:function(data){if(data.state=="200"){resolve(data.data)//异步操作成功时调用}else{reject(data.msg);//异步操作失败时调用}}});})Promise的all方法等，数组中的所有promise对象都被执行Promise.all([getData1,getData2]).then(function([ResultJson1,ResultJson2]){//这里写两个ajax返回数据成功后执行的业务逻辑 getData3()})forin|forofforinloopisindexforofloopisitemproxyjs数组方法1.splice(index,howmany,[item1,...]):从数组中添加/删除元素，返回删除的项，注意：该操作会改变原数组2.slice(start,[end])：从现有数组中返回选中的元素，该操作不会修改原数组。3.shift()：删除数组第一个元素，返回删除的项，改变原数组，不生成新数组。4.unshift(newelement1,[...]):在数组的开头添加一个或多个元素并返回新的长度。更改原始数组，不创建新数组。5.pop()：删除数组的最后一个元素并返回删除后的值，如果操作的是空数组，则返回undefined。更改原始数组。6.push(element1,[...])：向数组末尾添加一个或多个元素，并返回数组的长度。直接修改原数组。7.concat(arrayX,...)：连接两个或多个数组，返回连接数组的副本，不改变原数组。8.reverse()：反转数组元素的顺序，改变原数组，不会创建新数组。9.sort()：对现有数组进行排序，改变原数组。该方法会在排序前先对数组的每一项调用toString()方法，然后进行排序10.join([separator]):用指定的分隔符分隔数组元素，参数为空，默认为","分开。返回值是分离后形成的字符串数据类型。基本数据类型包括undefined、null、number、boolean、string；对象类型为Object，如：Object、array、function、data等；从输入URL到页面显示的详细过程1、输入URL2、DNS解析3、建立tcp连接4、客户端发送HTTP请求5、服务端处理请求 6、服务端响应请求7、浏览器显示HTML8，浏览器发送请求获取HTML中的其他资源。闭包闭包是一个表达式（通常是一个函数），它有一些变量和一个绑定到这些变量的环境，因此这些变量也是表达式的一部分。通俗地说：JavaScript中的所有函数都是一个闭包。但总的来说，嵌套函数产生的闭包更强大，大多数时候我们称之为“闭包”。当函数a的内部函数b被函数a外部的变量引用时，它就创建了一个闭包。
