前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端面试宝典(五)—— Vue

前端面试宝典(五)—— Vue

作者头像
萌兔IT
发布2020-04-13 11:30:13
6560
发布2020-04-13 11:30:13
举报
文章被收录于专栏:萌兔it

小伙伴们,我又回来了,实在太忙了。今天继续以前的专题吧,今天说说Vue。

什么是 MVVM?

MVVM是Model-View-ViewModel的简写,Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来,ViewModel 是一个同步 View 和 Model 的对象(桥梁)。在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

说说Vue的MVVM实现原理?

数据劫持、数据渲染、数据监听

  1. 数据劫持:通过Object.defineProperty进行数据劫持,在对象上定义新属性或修改属性并返回对象。
  2. 数据监听:通过sub,pub的发布者订阅者模式来对数据进行监听。
  3. 数据渲染:数据渲染为html分为两种情况,第一种是初次渲染的时候,第二种是渲染之后数据发生改变的时候,它们都需要调用updateComponent。

mvvm 和 mvc 区别?它和其它框架(jquery)的区别是什么?哪些场景适合?

MVC中M是Model(数据模型),用于存放数据;V是View(视图),也就是用户界面;C则是Controller是Model和View的协调者,Controller把Model中的数据拿过来给View使用。

MVVM上题已经介绍。

区别:vue 数据驱动,通过数据来显示视图层而不是节点操作。且mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。

Vue生命周期的理解?

vue 的生命周期就是 vue 实例从创建到销毁的过程。

  • beforeCreate:组件实例刚被创建,组件属性计算之前
  • created:组件实例创建完成,属性已绑定,但DOM还未生成,$el属性还不存在
  • beforeMount:模板编译/挂载之前
  • mounted:模板编译/挂载之后
  • beforeUpdate:组件更新之前
  • updated:组件更新之后
  • beforeDestroy:组件销毁之前调用
  • destroyed:组件销毁之后调用

组件之间如何通信?

  1. props/$emit:父组件A通过props的方式向子组件B传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。用于父传子或子传父。
  2. $emit/$on:通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信,包括父子、兄弟、跨级。当我们的项目比较大时,可以选择更好的状态管理解决方案vuex。
  3. Vuex:Vuex实现了一个单向数据流,在全局拥有一个State存放数据,当组件要更改State中的数据时,必须通过Mutation进行,Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。用于兄弟通信。
  4. provide/inject:Vue2.2.0新增API,这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。用于跨级通讯。

Compute与watch的区别?

computed:

  1. computed是计算属性,也就是计算值,它更多用于计算值的场景
  2. computed具有缓存性,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算
  3. computed适用于计算比较消耗性能的计算场景

watch:

  1. 类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作
  2. 无缓存性,页面重新渲染时值不变化也会执行

下期我们继续~

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 萌兔it 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
事件总线
腾讯云事件总线(EventBridge)是一款安全,稳定,高效的云上事件连接器,作为流数据和事件的自动收集、处理、分发管道,通过可视化的配置,实现事件源(例如:Kafka,审计,数据库等)和目标对象(例如:CLS,SCF等)的快速连接,当前 EventBridge 已接入 100+ 云上服务,助力分布式事件驱动架构的快速构建。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档