Vue面试常考题
常规篇
对MVVM的理解
- MVVM的数据驱动视图则可以专注于业务逻辑和数据的开发,利用双向数据绑定去更新视图。
- Model-View-ViewModel 的缩写,Model代表数据模型,View代表 UI 组件,ViewModel 将Model 和View 关联起来。
- 数据会绑定到ViewModel 层并自动将数据渲染到页面中,视图变化的时候会通知ViewModel层更新数据。
SPA单页面的优缺点
- 含义
- SPA( single-page application )仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免页面的重新加载。
- 优点
- 用户体验好,快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染
- 基于上面一点,SPA相对对服务器压力较小
- 前后端职责分明,架构清晰,前端进行交互逻辑,后端负责数据处理
- 缺点
- 初次加载耗时多:为实现单页面应用功能及显示效果,需要在加载页面的时候将JavaScript,CSS,HTML统一加载,部分页面按需加载
- 前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理;
- SEO 难度较大:由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。
v-show 和 v-if的区别
- v-if按照条件是否渲染,v-show是display的block或none;
- v-show页面加载的时候也会随之加载,不会重新销毁和渲染;
- v-if只有在判断符合的时候才会加载,不符合的时候会销毁,下一次需要重新加载渲染。
- 需要频繁切换的时候使用v-show比较好,反之使用v-if。
为什么 v-for 和 v-if 不建议用在一起
当 v-for 和 v-if 处于同一个节点时,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大,而真正要展示的数据很少时,这将造成很大的性能浪费
这种场景建议使用 computed,先对数据进行过滤
为何在v-for中使用key
- key的作用主要是为了高效的更新虚拟DOM。
- diff算法中通过tag和key来判断,是否是sameNode
- 减少渲染次数,提升渲染性能
- 当 Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动DOM元素来匹配数据项的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
为什么不建议用index作为key
因为和没写基本上没区别,因为不管你数组的顺序怎么颠倒,index 都是 0, 1, 2 这样排列,导致 Vue 会复用错误的旧子节点,做很多额外的工作
生命周期
生命周期函数:
- beforeCreat, created
- beforeMount, mounted
- beforeUpdate, updated
- beforeDestroy, destroyed
生命周期各个阶段发生了什么
什么阶段才能访问操作DOM:
mounted阶段,这个时候vue才将编译好的模板挂载到页面之上
接口请求一般放在哪个生命周期中:
created、beforeMount、mounted都可以,因为在这三个钩子函数中,data已经创建,可以将服务端端返回的数据进行赋值。
但是推荐在created钩子函数中调用异步请求,因为在 created 钩子函数中调用异步请求有以下优点:
- 能更快获取到服务端数据,减少页面loading 时间(貌似和在mounted没区别);
- ssr不支持 beforeMount 、mounted 钩子函数,所以放在 created 中有助于一致性;
描述Vue组件生命周期(父子组件):
页面创建:
- 父组件先创建
- 然后等到子组件创建和挂载完成
- 父组件才挂载完成
数据更新:
- 父组件先更新数据
- 然后等到子组件更新完成了
- 父组件才会执行updated
何时需要使用beforeDestory:
- 解绑自定义事件event.$off,防止内存泄漏
- 清楚定时器
- 解绑自定义的DOM时间,例如window scroll等
组件通讯(常用)
- 父子组件props/this.$emit
- 自定义事件event. o n / e v e n t . on/event. on/e