关于vue.js:vue面试

<article class=“article fmt article-content”>https://blog.csdn.net/kellywong/article/details/106430977<h4>一，js根本</h4>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.html3，闭包内存泄露解决方案，缩小内存泄露1，定时器没有革除 2，意外的应用全局变量，window 对象的数据是不会回收的 3，闭包的应用，理解闭包的预期生命周期和用处 4，缩小过多的console打印，只打印必要的信息进去4，Js垃圾回收机制垃圾回收机制：找出那些不再持续应用的变量，而后开释其占用的内存JS 垃圾回收机制：采纳标记革除法，和援用计数5，js面相对象的继承有哪些办法 https://www.cnblogs.com/gaosirs/p/10637609.html6，面向对象怎么实现重写，重载 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,<pre><code> 长处: 入门容易，开源组件丰盛，框架功能完善，文档较为具体，毛病: 插件引入不够标准，代码提醒变弱，不利于保护。</code></pre>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 树上，视图就更新了。<h4>二，webpack</h4>1，loader 是什么，有什么用：loader和plugin区别 是 webpack 用于在编译时解析各类文件格式，并输入来，比方：解析css-loader，sass-loader，babel-loaderPlugin 是什么： 是 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优化<pre><code> 将javaScript脚本放到页面底部，正当的ajax申请，应用懒加载，代码构造优化，</code></pre>4，css优化<pre><code> css文件压缩，css层级嵌套不要太多，删除无用的css，异步加载非首屏css </code></pre>5，图片优化<pre><code> 图片压缩，小图片合成雪碧图缩小http申请，采纳svg和base64类型图片</code></pre>6，webpack构建优化<pre><code> 缩小反复和不须要的依赖，缩小不必要的loader解决，模块懒加载，配置压缩css和js代码。</code></pre>3，webpage配置什么把es6的代码转为es5装置babel-loader就能够4，css工程化CSS工程化：将代码层次化，容易看出嵌套关系；精简代码，提高效率。个别应用SASS和LESS来实现工程化SASS：个别应用变量，嵌套，混合，继承等性能<h4>三，vue</h4>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插槽性能 通过一个办法传入不同的参数，调用这个办法，而后把子组件当参数传进去，传入不同的子组件就显示不同html4，本人实现过hooks吗 自定义 Hook 是一个函数，其名称以 “use” 结尾，封装一些逻辑，能够复用缩小代码冗余，函数外部能够调用其余的 Hook。 6.1,用于解决字符串(url)；数据格式化(日期)；单位转换5，vue 数据双向绑定 https://blog.csdn.net/weixin_45410795/article/details/1176364931.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, 须要一个订阅者watcherv-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()跳转和替换<h4>四，</h4>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/69551294107059487027，vue自定义指令及原理 vue.directive 定义一个指令，vue自定义指令相当于本人封装的一个函数办法，不便在其余中央调用9，判断对象是否为空<pre><code>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])} </code></pre>for in 和 for of的区别1.1，for in用来遍历对象，在遍历对象时还会遍历原型上的属性。会导致性能降落。遍历对象还能够用:Object.keys() 1.2，for of 用来遍历有序构造数据：数组，字符串，dom列表，map, set。不能遍历对象。 1.3，for in能够遍历数组，然而失去是下标，并不是数组元素。<pre><code>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)}</code></pre>ES6的高阶函数: 高阶函数，如 map ，reduce ，filter<pre><code>//新的写法: 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)</code></pre>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</article>