Vue(前端面试题)

本文深入探讨了Vue.js的核心概念,包括MVVM模式、双向数据绑定、生命周期、组件通信以及路由实现。文章详细解释了Vue的生命周期各个阶段的作用,如beforeCreate、created、mounted等,并讨论了Vue的优缺点。此外,还涵盖了Vue中的数据绑定原理、v-model、路由模式(hash、history、abstract)以及组件间的通信方法。文章还涉及到了Vue与Angular、React的对比,以及Vue CLI、Vuex、Vue Router等相关知识,帮助读者全面理解Vue.js的面试重点和实际应用。
摘要由CSDN通过智能技术生成

前言
看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈。不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚好背中了这道面试题

对于MVVM的理解?
MVVM 是 Model-View-ViewModel 的缩写。
Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。
View 代表UI 组件,它负责将数据模型转化成UI 展现出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。
在这里插入图片描述
MVVM的优缺点?
优点:
分离视图(View)和模型(Model),降低代码耦合,提高视图或者逻辑的重用性: 比如视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定不同的"View"上,当View变化的时候Model不可以不变,当Model变化的时候View也可以不变。你可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑
提高可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码
自动更新dom: 利用双向绑定,数据更新后视图自动更新,让开发者从繁琐的手动dom中解放
缺点:
Bug很难被调试: 因为使用双向绑定的模式,当你看到界面异常了,有可能是你View的代码有Bug,也可能是Model的代码有问题。数据绑定使得一个位置的Bug被快速传递到别的位置,要定位原始出问题的地方就变得不那么容易了。另外,数据绑定的声明是指令式地写在View的模版当中的,这些内容是没办法去打断点debug的
一个大的模块中model也会很大,虽然使用方便了也很容易保证了数据的一致性,当时长期持有,不释放内存就造成了花费更多的内存
对于大型的图形应用程序,视图状态较多,ViewModel的构建和维护的成本都会比较高。
Vue的生命周期?
beforeCreate(创建前) 在数据观测和初始化事件还未开始
created(创建后) 完成数据观测,属性和方法的运算,初始化事件, e l 属 性 还 没 有 显 示 出 来 b e f o r e M o u n t ( 载 入 前 ) 在 挂 载 开 始 之 前 被 调 用 , 相 关 的 r e n d e r 函 数 首 次 被 调 用 。 实 例 已 完 成 以 下 的 配 置 : 编 译 模 板 , 把 d a t a 里 面 的 数 据 和 模 板 生 成 h t m l 。 注 意 此 时 还 没 有 挂 载 h t m l 到 页 面 上 。 m o u n t e d ( 载 入 后 ) 在 e l 被 新 创 建 的 v m . el属性还没有显示出来 beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。 mounted(载入后) 在el 被新创建的 vm. elbeforeMountrenderdatahtmlhtmlmountedelvm.el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。

Vue是一个流行的前端框架,以下是对Vue生命周期的理解: Vue的生命周期包括了创建、挂载、更新和销毁等不同的阶段。在每个阶段,Vue都会触发相应的生命周期钩子函数,我们可以在这些函数中执行相关的操作。 - 创建阶段:Vue实例初始化,包括数据的观测、事件的初始化等。在这个阶段,可以使用beforeCreate和created钩子函数来执行一些初始化操作,但此时DOM元素还未挂载。 - 挂载阶段:在挂载阶段,Vue将编译好的模板挂载到DOM元素上,并将数据渲染到视图上。在挂载阶段,可以使用beforeMount和mounted钩子函数来执行相关的操作。beforeMount在挂载之前被调用,此时虚拟DOM已经创建好,但还未替换真实DOM;而mounted在挂载之后被调用,此时真实DOM已经插入到页面中。 - 更新阶段:当数据发生变化时,会触发更新阶段。在这个阶段,Vue会重新渲染视图以反映最新的数据。可以使用beforeUpdate和updated钩子函数来执行相关的操作。beforeUpdate在数据更新之前被调用,此时虚拟DOM已经更新完成,但还未应用到真实DOM;而updated在数据更新之后被调用,此时视图已经更新完成。 - 销毁阶段:在销毁阶段,Vue实例被销毁,包括清除定时器、解绑事件等。可以使用beforeDestroydestroyed钩子函数来执行相关的操作。beforeDestroy在实例销毁之前被调用,此时实例仍然可用;而destroyed在实例销毁之后被调用,此时实例已经被完全销毁。 总结来说,Vue的生命周期钩子函数提供了一系列的时机,方便我们在不同的阶段执行相关的操作,使得我们能更好地控制和管理Vue应用的生命周期。详细的内容可以参考中提供的博客链接。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【前端面试】39道Vue高频面试题,亲测有效!!!快来看看呀!!](https://blog.csdn.net/weixin_43352901/article/details/108210170)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值