前端⾼级⼯程师最全⾯试题-持续更新
1，.all 异常处理
2，vue3.0相关
1,vue的底层原理? Answer：Vue是采⽤数据劫持配合发布者-订阅者模式，通过Object.defineProperty来()来劫持各个属性的getter和setter。在数据发⽣变化的时候，发布消息给依赖收集器，去通知观察者，做出对应的回调函数去更新视图。2,vue3.0的新特性？ 更⼩ 更快 加强TypeScript⽀持 加强API设计⼀致性 提⾼⾃⾝可维护性 开放更多底层功能 1，更⼩当前最⼩化并被压缩的 Vue 运⾏时⼤⼩约为 20kB（2.6.10 版为 22.8kB）。Vue 3.0捆绑包的⼤⼩⼤约会减少⼀半，即只有10kB！
2，Object.defineProperty -> Proxy Object.defineProperty是⼀个相对⽐较昂贵的操作，因为它直接操作对象的属性，颗粒度⽐较⼩。将它替换为es6的Proxy，在⽬标对象之上架了⼀层拦截，代理的是对象⽽不是对象的属性。这样可以将原本对对象属性的操作变为对整个对象的操作，颗粒度变⼤。 javascript引擎在解析的时候希望对象的结构越稳定越好，如果对象⼀直在变，可优化性降低，proxy不需要对原始对象做太多操作。 3，Virtual DOM 重构 vdom的本质是⼀个抽象层，⽤javascript描述界⾯渲染成什么样⼦。react⽤jsx，没办法检测出可以优化的动态代码，所以做时间分⽚，vue中⾜够快的话可以不⽤时间分⽚。 传统vdom的性能瓶颈： 虽然 Vue 能够保证触发更新的组件最⼩化，但在单个组件内部依然需要
mysql数据库如何备份数据遍历该组件的整个 vdom 树。 传统 vdom 的性能跟模版⼤⼩正相关，跟动态节点的数量⽆关。在⼀些组件整个模版内只有少量动态节点的情况下，这些遍历都是性能的浪费。 JSX 和⼿写的 render function 是完全动态的，过度的灵活性导致运⾏时可以⽤于优化的信息不⾜ 那为什么不直接抛弃vdom呢？⾼级场景下⼿写 render function 获得更强的表达⼒
⽣成的代码更简洁
兼容2.x
vue的特点是底层为Virtual DOM，上层包含有⼤量静态信息的模版。为了兼容⼿写 render function，最⼤化利⽤模版静态信息，vue3.0采⽤了动静结合的解决⽅案，将vdom的操作颗粒度变⼩，每次触发更新不再以组件为单位进⾏遍历，主要更改如下将模版基于动态节点指令切割为嵌套的区块
每个区块内部的节点结构是固定的
每个区块只需要以⼀个 Array 追踪⾃⾝包含的动态节点 vue3.0将 vdom 更新性能由与模版整体⼤⼩相关提升为与动态内容的数量相关/**通常处理多个请求的时候我们会⽤Promise.all()⽅法。该⽅法指当所有在可迭代参数中的 promises 已完成，或者第⼀个传递的 promise （指 reject ）失败时，返回 promise 。但是当其中任何⼀个被拒绝的话。主Promise.all([..])就会⽴即被拒绝，并丢弃来⾃其他所有
promis 的全部结果。*/    var  p1 = Promise .resolve (3).catch (function (err ) {      return  err ;    });    var  p2 = Promise .reject (2).catch (function (err ) {      return  err ;    });    var  p3 = new  Promise ((resolve , reject ) => {      setTimeout (resolve , 100, "foo");    }).catch (function (err ) {      return  err ;    });        Promise .all ([p1, p2, p3]).then (values => {      console .log (values ); // [3, 2, "foo"]    }).catch (function (err ) {      console .log (1); //不会⾛到这⾥    });
1
2
3
4
5
6
web前端基础面试题7
8
9
10
11
12
13
14
15
16
数字在线随机数17
18
netstat linux19
20
21
22
23
4, 更多编译时优化
Slot 默认编译为函数：⽗⼦之间不存在强耦合，提升性能
Monomorphic vnode factory：参数⼀致化，给它children信息，
Compiler-generated flags for vnode/children types
5，选⽤Function_based API
1，vue3.0将组件的逻辑都写在了函数内部，setup()会取代vue2.x的data()函数，返回⼀个对象，暴露给模板，⽽且只在初始化的时候调⽤⼀次，因为值可以被跟踪。
2，新的函数api：const count = value(0)
value是⼀个wrapper，是⼀个包装对象，会包含数字0，可以⽤count.value来获取这个值。在函数返回的时候会关⼼是value wrapper，⼀旦返回给模版，就不⽤关⼼了。
优点：即使count包含的是基本类型，例如数字和字符串，也可以在函数之间来回传递，当⽤count.value取值的时候会触发依赖，改值的时候会触发更新。
3，计算属性返回的也是这个值的包装。
4，onMounted⽣命周期函数直接注⼊。
3，常见考题
1、vue中computed和watch的区别？
computed是通过⼏个数据的变化，来影响⼀个数据，⽽watch，则是⼀个数据的变化，去影响多个数据。
2、vue⾥data为什么是函数⽽不是对象？
如果写成对象，当组件被复⽤时，那么多个组件实例就会共⽤同⼀个data对象，这样改变其中⼀个实例的data，就会改变所有的。
因此写成函数返回值的形式，使每个组件实例都拥有⾃⼰的私有数据空间，不会造成混乱。
3、vue⾥数组改变为什么有的会渲染，有的不会渲染？
对⽤数组的变异⽅法（push、pop、sort等）进⾏数组操作时可以达到视图的重新渲染，因为vue对这些⽅法进⾏了包裹。 Vue
不能检测以下数组的变动： 利⽤索引直接设置⼀个数组项时 修改数组的长度时
因为这样的操作vue根本没法做⼀个Object.defineProperty处理。
解决⽅法：vm.$set(vm.items, indexOfItem, newValue)
4、update⾥去改变data值会有问题吗？ 由于数据更改导致的虚拟 DOM
重新渲染和打补丁，在这之后会调⽤update钩⼦。应避免在此期间更改状态，否则可能导致死循环。
bigdecimal值保留两位小数5、加载数据在created好还是在mounted好，两者区别？
在created⽐较好，如果在mounted钩⼦函数中请求数据可能导致页⾯闪屏问题。 两者区别：
created：在模板渲染成html前调⽤，即通常初始化某些属性值，然后再渲染成视图。
mounted：在模板渲染成html后调⽤，通常是初始化页⾯完成后，再对html的dom节点进⾏⼀些需要的操作。
6、vue通信的⼏种⽅式
children，（另有：
props和$emit， $parent 和 root：获取根实例） provide / inject， ref / refs， vuex（状态管理器），localstorage和sessionStorage
7、vue单向数据流 ⽗级 prop
的更新会向下流动到⼦组件中，但是反过来则不⾏。这样会防⽌从⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解。 注意在
JavaScript 中对象和数组是通过引⽤传⼊的，所以对于⼀个数组或对象类型的 prop
来说，在⼦组件中改变这个对象或数组本⾝将会影响到⽗组件的状态。
8、vue服务端渲染 Vue.js 是构建客户端应⽤程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进⾏⽣成 DOM 和操作DOM。然⽽，也可以将同⼀个组件渲染为服务器端的 HTML
字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应⽤程序
9、vue项⽬性能优化 1、使⽤v-if代替v-show 2、v-for必须加上key，并避免同时使⽤v-if 3、事件及时销毁 4、图⽚需要裁剪，⼀般使⽤⼆倍图即可，尽量使⽤webp图⽚，如果使⽤了vue-lazyload插件，可以使⽤以下⽅法⼀键替换webp（替换使⽤v-lazy指令的图⽚） 5、资源提前请求 经测试，Vue项⽬中各⽂件的加载顺序为：router.js、main.js、App.vue、[-page-].vue、
[component].vue 其中，router的加载时间相⽐于page.vue快近100ms，如果page.vue的⽂件较多，时间差异会更⼤ 所以，可以在页⾯挂载、渲染的同时去请求接⼝数据，如在router.js中请求数据：
6、异步路由
使⽤异步路由可以根据URL⾃动加载所需页⾯的资源，并且不会造成页⾯阻塞，较适⽤于移动端页⾯
建议主页⾯直接import，⾮主页⾯使⽤异步路由
使⽤⽅式：
7、异步组件 不需要⾸屏加载的组件都使⽤异步组件的⽅式来加载（如多tab），包括需要触发条件的动作也使⽤异步组件（如弹窗）使⽤⽅式为：v-if来控制显⽰时机，引⼊组件的Promise即可
8、使⽤轻量级插件、异步插件
使⽤webpack-bundle-analyzer查看项⽬所有包的体积⼤⼩，较⼤的插件包尽量寻轻量级的替代⽅案
opendesktop⾸屏⽤不到的插件、或只在特定场景才会⽤到的插件使⽤异步加载（如定位插件，部分情况可以通过URL传递经纬度；或⽣成画报插件，需要在点击时触发）；插件第⼀次加载后缓存在本地，使⽤⽅式为：{ path : '/order', component : () => import ('./views/order.vue')}
1
2
3
4<template > <div > <HellowWorld v -if ="showHello" /> </div ></template ><script >export  default  { components : { HellowWorld : () => import ('../components/HelloWorld.vue') }, data () { return  { showHello : false  } }, methods : { initAsync () { addEventListener ('scroll', (e ) => { if  (scrollY > 100) { this .showHello = true  } }) } }}</script >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
9、公⽤CDN 使⽤公⽤的CDN资源，可以起到缓存作⽤，并减少打包体积
10、减少⽹络请求 浏览器对同⼀时间针对同⼀域名下的请求有⼀定数量限制（⼀般是6个），超过限制数⽬的请求会被阻塞⾸屏尽可能减少同域名的请求，包括接⼝和js；按需减少⾸屏的chunk.js，合并接⼝请求
11、vue中不⽤vuex如何实现在任意⼦组件都可以访问⼀个全局的变量？ 通过 $root 访问根实例可实现。// 以定位插件为例const  latitude = getUrlParam ('latitude')const  longitude = getUrlParam ('longitude')// 如果没有经纬度参数，则使⽤定位插件来获取经纬度if  (!latitude || !longitude ) { // ⾸次加载定位插件 // webpack4写法，若使⽤webpack3及以下，则await import('locationPlugin')即可 if  (!this .WhereAmI ) this .WhereAmI = (await  import ('locationPlugin')).default  // }
1
2
3
4
5
6
7
8
9
10

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。