面试经典问题(1)

面试经典问题(1)

1.请简述一下mvvm框架是什么?它和jquery的区别是什么?

MVVM 全称 Model-View-ViewModel

1. MVVM开发模式可以让我们更关注处理业务逻辑,不必像jquery去操作dom对象
2. 目前流行mvvm框架有vue,angular等
3. 实现思想: 数据绑定,视图刷新 (数据双向绑定,数据驱动视图)
4. 主要目的:分离视图(view)和模型(model)
5. View可以独立于Model变化和修改
6. 一个ViewModel可以绑定到不同的View上
7. 在mvvm中,数据是核心
8. 操作viewmodel中的数据,会同步到dom
9. dom事件监控用户对dom的改动,也会同步到viewmodel

2.前端路由的实现方式

本质:

监听url的变化,匹配路由规则,显示相应的页面,无需刷新

实现方式

目前单页面使用路由的规则有两种实现方式

1) hash模式:

1. hash路由有一个明显的标识,就是使用hash模式下,url路径中会带有#号.
2. hash优势就是兼容性很好呀,在ie里的老版本中都能运行
3. hash缺点就是url存在#号,不够美观

2) history模式

1. history模式让路由更加美观

3.什么是虚拟dom,解决了什么问题

加载html文档后,解析文档并构建dom树
css解析生成cssom树
dom树和cssom树结合 ==RenderObject树
然后将renderobject树渲染成页面
这个过程存在于渲染引擎当中

渲染引擎跟js引擎是分开的,为了方便js操作dom,渲染引擎会暴露一些接口给js调用

由于两者分开,通讯是需要代价的,js操作渲染引擎暴露出来的接口,性能消耗太大,因此减少dom操作会大大提高我们的性能

虚拟dom干了什么??

1. 虚拟dom直接用javascript实现dom树(大致上)
2. 组件的html结构不会直接生成dom,而是映射生成虚拟的javascript dom结构
3. 又通过这个虚拟dom上实现了一个diff算法,找出最小的变更,然后把这些变更写到实际的dom当中
4. 这个虚拟dom以js的形式存在,计算性能提高
5. 减少了实际dom操作次数,性能得到提升

4.vue的生命周期

8个阶段
创建前/创建后 beforeCreate/created
载入前/载入后 beforeMount/mounted
更新前/更新后 beforeUpdate/updated
销毁前/销毁后 beforeDestroy/destroyed

1. beforeCreate阶段,vue实例挂载的元素el还没有
2. beforemount阶段,vue实例的$el和data初始化
3. mounted阶段,vue实例挂载完成,data.message成功渲染
4. data变化时,触发beforeUpdate和updated方法
5. destroy后vue解除事件监听和dom绑定,dom结构依然存在