当前位置: 首页 > Web前端 > vue.js

Vue面试常见题

时间:2023-04-01 01:56:48 vue.js

1、v-for和v-if的优先级先判断条件再看是否执行!结论:1、很明显v-for先于v-if解析(你怎么知道的告诉面试官)2、如果同时发生,每次渲染都会先执行循环,再判断条件。无论如何,循环是不可避免的,而且会浪费性能。3.为了避免这种情况,将模板嵌套在外层,在this中一级v-if判断,然后内部v-for循环2.为什么vue组件数据必须是函数,而vue的根实例是函数没有这个限制?在源码中找到答案:src\corelinstance\state.js-initData()函数每次执行都会返回一个新的数据对象实例结论Vue组件可能存在多个实例。如果数据以对象的形式定义,会导致它们共享一个数据对象,状态的改变会影响所有的组件实例。这不是真的。合理的;以函数的形式定义,在initData时会作为工厂函数返回一个新的数据对象,有效避免了多实例之间的状态污染问题。但是在创建Vue根实例时不存在这个限制,因为根实例只能有一个,所以不用担心这种情况。3、你知道vue中key的作用和工作原理吗?说说你对它的理解。在源码中找到答案:src\core\vdom\patch.js-updateChildren()结论1.key的作用主要是高效更新虚拟DOM。其原理是vue可以准确判断两个节点是否相同,从而避免不同元素的频繁更新,使得整个patch过程更加高效,减少DOM操作量,提升性能。2.另外,如果不设置key,更新列表时可能会导致一些隐藏的错误。3.在vue中,key属性在同标签名元素过渡时也会用到。目的也是为了让vue能够区分它们,否则Vue只会替换其内部属性而不会触发过渡效果。4、你怎么理解vue中的diff算法?源码分析1:必然,lifecycle.js-mountComponent()组件中可能有很多数据源码分析2中的关键:执行方法,patch.js-patchVnode()patchVnode是diff发生的地方,整体策略:深度优先,同层对比源码分析三:效率,patch.js-updateChildren()总结1.diff算法是虚拟DOM技术的必然产物:通过对比新旧虚拟DOM(即diff),改变的地方在真实的DOM上更新;此外,还需要diff高效地进行比较过程,从而将时间复杂度降低到O(n)。2、vue2.x中为了降低Watcher粒度,每个组件只有一个Watcher与之对应。只有引入diff,才能准确找到发生变化的地方。3、vue中执行diff的时刻是组件实例执行它的update函数的时候,会比较上一次的渲染结果oldVnode和新的渲染结果newVnode,这个过程叫做patch。4.diff遵循深度先生成的策略,同县比对,两个section之间的比对会根据是否有subsection或textsection进行不同的操作;比较两组子节点是一个算法关键点是首先假设头节点和尾节点可能相同,做4次比较尝试。如果没有找到相同的节点,则按一般方式查找。搜索完成后,根据情况对剩余节点进行处理;同一个节点通常可以借助key非常准确的找到。所以整个补丁过程非常高效。5.谈谈对vue组件化的理解?回答大意:阐述了组件化的定义、优点、使用场景和注意事项,强调了vue中组件化的一些特点。源码分析1:组件定义//组件定义vue.component('comp',{template:'

thisisacomponent
'})组件定义,src\core\global-api\assets.jsvue-loader会将模板编译成render函数,最后导出组件配置对象。打开i总结1.组件是独立的、可重用的代码组织单元。组件系统是Vue的核心特性之一,它使开发人员能够使用小型、独立且通常可重用的组件来构建大型应用程序;2、组件化开发可以大大提高应用程序的开发效率、可测试性、可重用性等;3、组件的使用分为:页面组件、业务组件、通用组件;4、vue组件是基于配置的。我们通常写的组件是组件配置而不是组件。该框架稍后将生成其构造函数。它们基于VueComponent并在Vue中扩展;5、Vue中常用的组件化技术有:属性prop、自定义事件、slot等,主要用于组件通信、扩展等;6、合理划分组件有助于提高应用性能;7、组件应该是高内聚低耦合的;8.遵循单向数据流的原则。6.谈谈你对vue设计原则的理解?vue官网上有很多定义和特性:。ProgressiveJavaScriptframework●简单易用,灵活高效,所以本题讲解的整体思路可以按此展开。渐进式JavaScript框架:与其他大型框架不同,Vue被设计为自下而上逐层应用。Vue的核心库只专注于视图层,不仅易于使用,而且易于与第三方库或现有项目集成。另一方面,当与现代工具链和各种支持库相结合时,Vue也完全有能力提高复杂单页应用程序的易用性。Vue提供数据响应、声明性模板语法和基于配置的组件。系统的核心功能。这些让我们只需要专注于应用的核心业务,只要会写js、html和css,就可以轻松写出vue应用。灵活性渐进式框架的最大优点是灵活性。如果应用足够小,我们可能只需要vue的核心特性就可以完成功能;随着应用规模的不断扩大,我们可能会逐步引入路由、状态管理、vue-cli等库和工具,无论是应用量还是学习难度,都是一个逐渐增加的平缓曲线。效率超快的虚拟DOM和diff算法使我们的应用程序具有最佳性能。追求效率的过程还在继续。Vue3中引入Proxy提高数据响应能力,以及编译器中对静态内容编译的改进,将使Vue更加高效。灵活性渐进式框架的最大优点是灵活性。如果应用足够小,我们可能只需要vue的核心特性就可以完成功能;随着应用规模的不断扩大,我们可能会逐步引入路由、状态管理、vue-cli等库和工具,无论是应用量还是学习难度,都是一个逐渐增加的平缓曲线。高效超快的虚拟DOM和diff算法使我们的应用程序具有最佳性能。追求效率的过程还在继续。Vue3中引入Proxy提高数据响应能力,以及编译器中对静态内容编译的改进,将使Vue更加高效。谈谈你对MVC、MVP和MVVM的理解?概括。这三个都是框架模式,都是为了解决Model和View之间的耦合问题而设计的。●MVC模式出现较早,主要用于后端,如SpringMVC、ASP.NETMVC等,早期也应用在前端领域,如Backbonejs。它的优点是层次清晰,缺点是数据流向混乱,灵活性带来的维护问题。、MVP模式是MVC的一种进化形式。Presenter作为中间层负责MV通信,解决了两者之间的耦合问题,但是过于臃肿的P层会导致维护问题,MVM模型在前端领域被广泛使用。不仅解决了MV耦合问题,还解决了大量复杂的代码和维护两者映射关系的DOM操作代码。它提高了开发效率和可读性,同时保持了卓越的性能。表现。