第一题——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