面试题vuex,vue2.0面试题

　　【面试问题】想用vue考20k，应该这样回答面试问题(源码版)_前端面试题库助手技术博客_博客

　　来源视频：想用vue考20k，面试问题应该这样回答。文章是看完视频后的总结笔记。我觉得这个视频他会做的很好的就是直接分析vue的源代码，从源代码中分析问题，简单易懂，有说服力。

　　总结：9个板块9个小知识点。

　　1.v-if和v-for的比较

　　2.vue组件数据功能表

　　3.钥匙的功能

　　4.差分算法

　　5.组件化

　　6.vue设计理念

　　7.MVC MVP和MVVM

　　8.vue优化

　　9.vue3特征

　　1.v-if和v-for的优先级更高。如果两者同时出现，应该如何优化才能获得更好的性能？我们先下结论，v-for是在v-if之前解析的。

　　经过评论区大佬们的指点，修改结论是：

　　2.x当v-if与v-for一起使用时，v-for的优先级高于v-if。

　　3.x当v-if与v-for一起使用时，v-if的优先级高于v-for。

　　注意：-l:返回最终结果的是列表渲染的函数。查看vue源代码：路径是src/compiler/codegen/index.js文件。在源代码中发现，先处理静态节点(staticRoot)，再处理once，然后会处理for代码。它表明for优先于if断点。经过调试，也确认了for优先于if。结论：

　　vue2.0

　　1.v-for在v-if之前解析(告诉面试官你是怎么知道的，看源代码)

　　2.如果同时出现，每次渲染都会先执行循环来判断条件，反正循环是不可避免的，浪费性能。

　　3.为了避免这种情况，将模板嵌套在外层，在这一层进行v-if判断，然后在内层进行v-for循环。

　　vue3.0

　　2.为什么vue组件数据必须是函数，而vue根实例却没有这个限制？第一个结论：

　　1.数据必须是一个函数，保证当有多个实例时，为了保护彼此的状态不受干扰和污染。

　　2.每次创建根实例时，都会使用新方法。全局范围内只会创建一个实例，但不会很多，也不会有污染问题，所以可以省略函数。

　　每次执行函数，都会返回一个全新的数据对象实例。

　　测试代码如下：

　　数据在src/core/instance/init.js文件中初始化

　　重点是研究initData函数中的源代码。发现：这里的116行将对数据作出判断，如果数据是函数类型，则执行。并将结果作为数据选项的值，否则使用用户设置的数据。

　　在上面的测试用例列表中，vue.component的comp属性实际上只执行一次，也就是说第二个参数选项在处理的时候只会处理一次。数据的选项都指向同一个地方，一个组件的不同实例实际上使用的是同一个数据，造成了数据污染。如果是组件，组件中的数据不能像测试中那样设置。

　　每次创建根实例都使用新方法，在全局范围内只创建一个实例，而不是很多个实例，所以不存在污染问题，所以可以省略函数。

　　在多个实例的情况下，为了保护彼此的状态不受干扰和污染。vue的根实例需要使用function函数。

　　结论：

　　vue组件可能有多个实例。如果数据是以对象的形式定义的，那么它们会共享一个数据对象，状态的改变会影响到所有的组件实例，这是不合理的。使用函数形式定义initData会将其作为一个新的数据对象作为工厂函数返回，有效避免了多个实例间的状态污染问题。但是在创建vue的根实例的过程中并没有变更限制，因为根实例只能有一个，所以不需要担心这个问题。

　　3.钥匙的工作原理。谈谈你对它的理解。在源代码中找到答案：src/core/vdom/patch . js-update children()。通常的答案是：您可以唯一地确定一个dom元素，因此执行diff算法更有效。案例分析：执行2秒后在C前面插入F。

　　如果该键不用于更新插入操作三次，则该键仅用于执行插入操作一次。

　　结论：

　　1.key的作用是高效地更新虚拟dom。原理是vue在补丁过程中可以通过key准确判断两个节点是否相同，从而避免不同元素的频繁更新，使整个补丁过程更加高效，减少DOM操作，提高性能。

　　2.如果不设置key，列表更新时可能会产生一些隐藏的bug，比如更新不更新。

　　3.在vue中使用相同tag name元素的转场切换中，也会使用key属性，这样vue就可以区分它们，否则vue只会替换其内部属性而不会触发转场效果。你需要用key作为唯一的判断。

　　4.如何理解vue中的diff算法？

　　总结：

　　Diff算法：在vue中并不特殊，但是所有涉及虚拟dom的情况都有diff算法。

　　必要性：diff算法可以准确比较新旧虚拟DOM中key的变化，从而提高更新效率。

　　执行方式：深度优先，同行比较。

　　效率：查源代码就知道了

　　1.diff算法的必要性：

　　分析：vue组件的任何实例在创建完成后挂载时都会被调用。一个组件调用Mounted一次，同时也调用右边的watcher。在vue中，watcher和vue的实例是一一对应的。

　　结论：组件中使用了多个数据键。如何保证键的变化，可以用diff算法来比较新旧虚拟dom。为了准确地知道

　　2.diff算法的执行模式。核心源代码：586行。

　　分析：patchVnode是diff发生的地方。总体策略：深度第一，同级别比较。首先，开始比较根节点，看是否有子节点。如果有所有子代，则更新子代以比较子代，直到底层。具体来说，如果代码找到了直接更新子节点，如果没有，则查看是否有其他操作，

　　3.diff算法的效率：就是上面说的updatechild()

　　总结：1。diff算法是虚拟DOM技术的必然产物：通过将新的虚拟DOM与旧的(即diff)进行比较，在真实DOM上更新变化的地方。此外，diff需要高效地执行比较过程，从而将时间复杂度降低到O(n)

　　2.在vue2.0x中，为了降低watchers的粒度，每个组件对应的watchers只有一个，只有引入diff才能准确找到变化的地方。

　　3.vue中diff执行的时刻是组件实例执行更新函数的时候，它会和上次渲染结果oldVnode和新渲染结果进行比较。这个过程称为修补。

　　4.diff过程遵循深度优先、整体同级比较的策略。两个节点之间的比较会根据是否有子节点或者文本节点做不同的操作。比较两组子节点是算法的关键点。首先，假设头节点可以进行四次比较尝试。如果没有找到相同的节点，就用一般的方式搜索，然后根据情况处理剩余的节点。在key的帮助下，通常可以非常准确地找到同一个节点，所以整个补丁过程非常高效。

　　5.理解vue组件化。总体回答：描述了vue组件化的定义、优势、使用场景和注意事项，要强调VUE组件化的一些特点。

　　1.源代码分析：组件定义单独提出了一些独立的功能，有独立的功能，方便复用vue中的常用定义。第一个是全局定义，第二个是单文件组件的定义。

　　源代码：src/global/assets.js/

　　2.源代码分析：组件化的优势源代码：lifecycle.js-mountComponent()

　　组件化的优点：可维护性、可测试性、可重用性，以及来自组件观察器和渲染功能的分析。

　　当执行一个组件时，每个组件将对应一个观察器。当组件的边缘发生变化时，只会调用组件内部的渲染函数。可以把频繁变化的数据单独放在一个组件里，后期只需要执行这个函数就能起到局部刷新的作用。

　　3.组件化的实现构造器：src/core/global-api/extend.js实例化和挂载：src/core/vdom，patch.js-createElm()

　　摘要

　　1.组件是独立的、可重用的代码组织单元。组件是vue的核心特性之一，它使开发人员能够用小型的、独立的、通常是可重构的

　　2.组件开发可以大大提高应用程序开发的效率、可测试性和可重用性。

　　3.组件分为页面组件、业务组件和通用组件。

　　4.vue的组件是基于配置的，我们平时写的组件是组件配置而不是组件。框架稍后会生成它的构造函数，它们是基于vueComponent的。展开vue

　　5.vue中常见的组件化技术有：属性属性自定义事件。槽等。它们主要用于组件通信、扩展等。

　　6.合理划分组件有助于提高应用程序性能。

　　7.组件应该是高内聚和低耦合的。

　　8.遵循单向数据流的原则。

　　6.理解vue的设计原则。vue的定义和特点官网上写着：vue是一个渐进式的javscript框架，简单易用，高效灵活。

　　根据这两点回答渐进式javascript框架：

　　与其他大型框架不同，vue设计为自下而上一层一层地应用。vue的核心库只专注于视图层，不仅易用，而且易于与第三方库的现有项目集成。另一方面，当现代工具链和各种支持类库一起使用时。Vue还可以为复杂的单页提供驱动。核心库是一些声明的渲染。组件系统只关注视图层，可以作为其他项目中的库，也可以作为一个大框架来构建项目。这就是循序渐进的学习过程，也是循序渐进的。只有模板语法可以学，基本功能也可以开发，以后可以学工科。

　　易用性：

　　Vue提供了数据响应性、声明式模板语法、基于配置的组件系统等核心特性，使得我们只需要专注于应用的核心业务，只要会写js就可以了。而且你可以用html和css轻松编写vue应用。

　　灵活性：

　　渐进式框架最大的优点是它的灵活性。如果应用足够小，我们可能只需要vue的核心特性就能完成功能。随着应用规模的不断扩大，可以赶上引入路由、状态管理、vue-cli等库和工具。无论是申请量还是学习难度，都是一条渐进递增的曲线。

　　效率：

　　超快的虚拟DOM和diff算法让我们的应用程序拥有最好的性能，追求更高效率的过程还在继续。vue3中引入proxy来提高数据响应能力，以及编译器中静态内容的改进，将使vue更加高效。

　　7.对MVC MVP和MVVM的理解和解答思路：

　　涉及的知识点很多，很难说清楚透彻，因为mvc MVp的模型我们前端程序员自己都没用过。当时他们只是反映了这些年从无到有，再到优秀的变化过程。沿着这个思路回答。

　　web1.0时代没有前端概念。使用的web应用多为ASP.NET和java PHP项目开发，通常由多个aspx/jsp/hph的单个文件组成，每个文件都有html css js或java代码。

　　为了使开发更加方便，代码易于维护，前后职责清晰，MVC开发模式和框架出现了。前端显示模板形式的典型框架是Spring Structs Hibernate (SSH)。

　　目标是分层控制数据、视图和业务逻辑，易于维护和读写。前端只在后端完成视图层，但最好把所有代码逻辑都放在服务器端。

　　问题：1。前端页面开发效率不高；2.前端和后端职责不清。

　　web2.0时代，从Gmail出现开始，见证了ajax技术的出现。前端的职责更加清晰，因为前端可以通过ajax与后端进行交互。因此，整体架构图也变成了：

　　前端只需要开发页面内容。数据由后台提供，项目可以实现ajax，可以使页面部分刷新，减少服务器的负载和流量消耗。很多渲染从服务器端变成了客户端，前端开发了一些库jquery。

　　问题：缺乏可行的开发模式来承载更复杂的业务需求，页面内容混杂在一起。一旦申请

　　前端分离的架构演进：MVC MVP MVVMMVC前端MVC类似于后端，有视图、控制器和模型Model:负责应用数据的存储。与后端数据同步。控制器：负责业务逻辑，根据用户行为修改模型数据。视图：负责视图显示。将模型模型中的数据可视化：

　　理论上可行，实际上不方便，然后逐渐演变(下面这个是mvc)。这种模式也可能带来一些问题：1。数据流比较混乱，如图视图，但是控制器比较大，比较简单。由于很多开发者会在view中编写一些逻辑代码，view中的内容会逐渐变得越来越大，而控制器却越来越薄。mvp模式似乎在前端的改动中缺失了。因为Angular早早把MVVM模式代入前端，跳过了MVP。

　　MVP和mvc很接近。p表示Persenter被理解为中间人，负责视图和模型之间的数据流，阻止视图和emodel之间的直接通信。

　　P负责与M和V的双向交互，view成为被动视图，自身编译很小，把V和M隔开，然而应用变得很大，导致P的体量增加，维护困难。

　　视图模型

　　Mvvm核心是中间的vm层：ViewModel通过实现一套数据对应机制，自动响应模型中的数据变化。同时，ViewModel将实现一套更新端速率，自动将数据变化转化为视图更新，并通过时间监控响应视图中的用户交互来修改模型中的数据。这样，在viewModel中减少了大量的DOM操作代码MVVM。在保持视图和模型松散耦合的同时，它还减少了维护它们之间关系的代码。用户关注业务逻辑，兼顾开发速度和可维护性。

　　总结：1。三者都是框架模式，其设计目标都是解决模型和视图的耦合问题。

　　2.MVC模式出现较早，主要应用在后端，如Spring MVC和ASP.NET MVC等。这在层次上有点清晰，但缺点是数据流的混乱和灵活性带来的维护问题。

　　3.3的进化。MVC中的MVP模式。Presenter作为中间层负责MV通信，解决了两者之间的耦合问题。但是过去臃肿的P层会导致维护问题。

　　4.MVVM模式广泛应用于前端领域。它不仅解决了MV耦合的问题，还解决了大量复杂的代码和保持两者之间投影关系的DOM操作，也就是说，不需要逐个更改DOM操作。它提高了开发效率和可读性，同时保持了优异的性能。

　　8.你知道哪些vue性能优化方法？主要讨论了vue级的优化。

　　1.路由延迟加载：

　　2.保持活动高速缓存页面

　　3.使用v-show重用DOM

　　4.v-for遍历避免了使用v-if计算属性预先过滤数组。

　　5.长列表性能优化。如果列表纯粹是显示数据，数据不会有变化，所以不需要响应。

　　使用freeze方法冻结，或将属性更改为false。

　　如果是大数据列表，可以使用虚拟滚动只渲染一小部分区域内容。

　　参考第三方组件

　　6.事件销毁当vue组件被销毁时，它会自动解除绑定它的所有指令和事件侦听器，但只解除绑定组件本身的事件。

　　7.图片的懒加载对于图片太多的页面，为了加快页面的加载速度，很多时候我们需要不加载没有出现在页面可见区域的图片，等到它们滚动到可见区域再加载。

　　8.第三方插件按需导入element-ui之类的第三方组件库，可以按需体现，避免过于笨重。

　　使用bable的插件

　　9.无状态组件被标记为功能组件显示组件，因此没有实例标记功能。

　　10.子组件分割

　　有些子组件比较耗时，所以单独分成一个组件，自己渲染不会影响其他组件。

　　1.变量的本地化

　　Reault实际上是一个计算属性，也是一个基本属性。基本属性是耗时的，

　　12.SSR服务器渲染。

　　9 VUE 3.0的新功能速度更快：

　　基于代理的虚拟DOM重写优化槽生成静态树提升静态属性提升响应系统

　　较小：

　　优化核心libr

　　跨平台：编译器核心和运行时核心是平台无关的，这使得vue更容易与任何平台(web Android IOS)一起使用

　　更易于使用：

　　改进的TypeScript支持，编辑器可以提供强大的类型检查和错误警告，更好的调试支持独立的响应式模块CompositionAPI。

　　提出了几个方向：虚拟DOM重写期望更多的编译时提示来降低运行时开销，通过有效创建虚拟节点组件，单次调用快速检查子节点类型，跳过不必要的条件分支，更容易优化JS引擎。

　　优化插槽以生成vue3。父母和孩子可以独立重新渲染。确保正确跟踪实例的依赖关系，并避免不必要的父子组件的重新呈现。

　　StaticTree提升使用静态树提升，这意味着vue3的编译器将能够检测到什么是静态的，然后提升它，从而降低渲染成本，跳过修复整棵树，从而降低渲染成本，即使出现多次也能正常工作。

　　静态属性提升使用静态属性提升。vue3打补丁的时候会跳过属性不会变的节点，子节点需要继续变。

　　基于代理的数据响应vue2.0使用Object.definfPropertyde getter和setter vue3将使用ES6中的代理作为观察机制：组件实例的初始化速度将提高100%。如果你用代理比过去节省一半内存，你会爱死速度快，但有低浏览器版本不兼容。为了继续支持IE11 vue3，你将发布一个基于观察者机制的新代理版本。

　　高维护性vue3会带来更易维护的源代码，不仅仅是使用Typescript，还会解耦很多包，使其更加模块化。

　　版权归作者所有：原创作品来自博主前端面试题库助手，转载请联系作者获得转载授权，否则将追究法律责任。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。