vue面试总结

最新推荐文章于 2023-11-03 17:25:06 发布

行行皆辛苦

最新推荐文章于 2023-11-03 17:25:06 发布

阅读量286

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/dream_will_true/article/details/115110688

版权

第一题——v-if 和v-for 那个优先级更高，如果同时出现，要怎样优化性能。

源码中找答案compiler/codegen/index.js

测试代码

<div id=" demo">
<h1>v- for和v- if谁的优先级高?应该如何正确使用避免性能问题? </h1>
<!-- <p v-for="child in children" v-if="isFolder">{{child. title}}</p> -->
<template v-if= " isFolder">
<p v-for="child in children">{{child. title}}</p>
</ template>
</div>

源码节选

export function genElement (el: ASTElement, state: CodegenState): string {
if (el. parent) {
el.pre = el.prel el. parent. pre
}
if (el.staticRoot && lel. staticProcessed) {
return genStatic(el,
state )
} else if (el.once && !el . onceProcessed) {
return genOnce(e1, state)
} else if (el.for && !el. forProcessed) {   //先是for
return genFor(el, state )
} else if (el.if && !el . ifProcessed) {    //  再是if  
return genIf(el, state)
} else if (el.tag === ' template' && !el. slotTarget & !state.pre) {
return genChildren(el, state) | 'void 0'
} else if (el.tag ===
slot') {
return genSlot(el, state)
} else {

结论：
1.显然v-for优先于v-if被解析(把你是怎么知道的告诉面试官)

2.如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能

3.要避免出现这种情况，则在外层嵌套template,在这一层进行v-if判断，然后在内部进行v-for循环

===========================================================

第二题——key的作用。

key的作用主要是为了高效的更新虚拟DOM,其原理是vue在patch过程中通过key可以精准判断两个节点是否
是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效,减少DOM操作量,提高性能。
另外，若不设置key还可能在列表更新时引发一-些隐蔽的bug
vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则
vue只会替换其内部属性而不会触发过渡效果。

第三题——组件化的了解。

组件是独立和可复用的代码组织单元。组件系统是Vue核心特性之- - -，它使开发者使用小型、独立和通常可
复用的组件构建大型应用;
组件化开发能大幅提高应用开发效率、测试性、复用性等;
组件使用按分类有:页面组件、业务组件、通用组件;
vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件,框架后续会生成其构造函数，它们基于
VueComponent,扩展于Vue;
vue中常见组件化技术有:属性prop,自定义事件，插槽等，它们主要用于组件通信、扩展等;
合理的划分组件，有助于提升应用性能;
组件应该是高内聚、低耦合的;
遵循单向数据流的原则。

第四题——MVC、MVP和MVVM的理解

前后端分离后的架构演变——MVC、MVP和MVVM

MVC

前端的MVC与后端类似，具备着View、Controller和Model。

Model：负责保存应用数据，与后端数据进行同步

Controller：负责业务逻辑，根据用户行为对Model数据进行修改

View：负责视图展示，将model中的数据可视化出来。

三者形成了一个如图所示的模型：

在这里插入图片描述

MVP

MVP与MVC很接近，P指的是Presenter，presenter可以理解为一个中间人，它负责着View和Model之间的数据流动，防止View和Model之间直接交流。我们可以看一下图示：
在这里插入图片描述
我们可以通过看到，presenter负责和Model进行双向交互，还和View进行双向交互。这种交互方式，相对于MVC来说少了一些灵活，VIew变成了被动视图，并且本身变得很小。虽然它分离了View和Model。但是应用逐渐变大之后，导致presenter的体积增大，难以维护。要解决这个问题，或许可以从MVVM的思想中找到答案。

MVVM

首先，何为MVVM呢？MVVM可以分解成(Model-View-VIewModel)。ViewModel可以理解为在presenter基础上的进阶版。如图所示：
在这里插入图片描述

ViewModel通过实现一套数据响应式机制自动响应Model中数据变化；

同时Viewmodel会实现一套更新策略自动将数据变化转换为视图更新；

通过事件监听响应View中用户交互修改Model中数据。

这样在ViewModel中就减少了大量DOM操作代码。

MVVM在保持View和Model松耦合的同时，还减少了维护它们关系的代码，使用户专注于业务逻辑，兼顾开发效率和可维护性。

总结

1. 这三者都是框架模式，它们设计的目标都是为了解决Model和View的耦合问题。

2. MVC模式出现较早主要应用在后端，如Spring MVC、http://ASP.NET MVC等，在前端领域的早期也有应用，如Backbone.js。它的优点是分层清晰，缺点是数据流混乱，灵活性带来的维护性问题。

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

4. MVVM模式在前端领域有广泛应用，它不仅解决MV耦合问题，还同时解决了维护两者映射关系的大量繁杂代码和DOM操作代码，在提高开发效率、可读性同时还保持了优越的性能表现。

第五题——Vue的批量异步更新

异步：只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

批量：如果同一个 watcher 被多次触发，只会被推入到队列中一次。去重对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列执行实际工作。

异步策略：Vue 在内部对异步队列尝试使用原生的 Promise.then 、 MutationObserver 和setImmediate ，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

第六题 ——原型的继承

原型继承 => 就是通过改变原型链的方式来达到继承

子类.prototype = 父类的实例

             + 继承
                 ==> 涉及两个构造函数
                 ==> 准备好的父类叫Person
                 ==> 再写一个Student当作子类
                 ==> 完成继承以后，Student继承自Person
                 ==> 那么s1就可以使用name属性和sayHi方法
             + 原型继承 ==> 就是通过改变原型链的方式来达到继承
                 ==> 子类.prototype = 父类的实例
             + 原型继承的缺点
                 1 继承下来的属性没有继承在自己身上
                     ==> 而是在__proto__里面
                     ==> 当要访问的时候就要去__proto__里面找
                     
                 2 继承的目的是为了继承属性和方法
                     ==> 我自己要使用name属性和age属性
                     ==> 要在两个地方传递
                     ==> age可以单独设置
                     ==> name无法在不影响其他实例的情况下设置
                     ==> 对于代码的书写和代码的维护阅读都不是很好                    
                 
     */
     // 1 准备一个父类
     function Person(name){
         this.name = name;
     }
     // 原型上有一个方法
     Person.prototype.sayHi = function(){
         console.log('hello world')
     }
     
     // 2 准备一个子类
     function Student(age){
         this.age = age;
     }
     // 让Student来完成继承:子类.prototype = 父类的实例
     Student.prototype = new Person('Jack');
     // 这一行代码完成以后，当你在去new Student(18)的时候
     var s1 = new Student(18);
     console.log(s1)
     /* 
         当你使用s1去访问name属性的时候
             + 自己没有，去到__proto__上有
         当你使用s1去访问sayHi方法的时候
             + 自己没有，去到__proto__上没有
             + 就去__proto__上找，就有了
     */

理解cookie、session、localStorage、sessionStorage之不同

相同点
都存储在客户端。

不同点
1.存储大小

cookie数据大小不能超过4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。

sessionStorage：数据在当前浏览器窗口关闭后自动删除。

cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
————————————————
版权声明：本文为CSDN博主「wunianisme」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_29645505/article/details/88396944

行行皆辛苦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue面试总结

第一题：v-if 和v-for 那个优先级更高，如果同时出现，要怎样优化性能。源码中找答案compiler/codegen/index.js测试代码<div id=" demo"><h1>v- for和v- if谁的优先级高?应该如何正确使用避免性能问题? </h1><t
复制链接

扫一扫