面面经

发布时间 2023-09-20 17:03:39作者: 忆小样

1、谈谈对MVVM的理解?

MVVM是Model-View-ViewModel的缩写,是一种设计思想。

Model层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。

View代表UI组件,负责将数据模型转换成UI展现出来。View是一个同步model和View的对象在MVVM架构下,View和Model直接并没有直接联系,通过View和Model进行交互,它们之间的交互是双向的,View数据的变化会同步到Model中,Model数据的变化立即会反应到View上。

ViewModel通过双向数据绑定把View层和Model层连接了起来,他们之间的同步工作完全是自动的,不需要手动操作Dom。

2、vue优点?

响应式编程:Vue会自动对页面中某些数据变化做出响应。通过MVVM思想实现数据的双向绑定,让开发者不用再操作Dom对象,有更多时间去思考业务逻辑。

虚拟Dom:在传统开发中,用JQuery或者js操作函数对DOM进行频繁操作的时候,浏览器要不停地渲染新的Dom树,导致在性能上的开销特别高。虚拟dom最后再计算完毕才真正将dom操作提交。

组件化开发:vue通过组件,把一个单页面应用中的各种模块拆分到一个一个单独的组件。组件化开发的优点:提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发。

 

3、vue生命周期的理解?

什么是vue生命周期?生命周期就是一个vue实例从创建到销毁的过程。

总共分为8个阶段:

beforeCreate:在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created:在实例完成后发生,可以使用数据,更改数据,此处更改数据不会触发updataed函数。

beforeMounted:发生在挂载之前,虚拟dom已经创建完成,即将开始渲染。

mounted:在挂载完成后发生,我此阶段,真实的DOM挂载完毕,数据完成双向绑定,可以访问到Dom节点,使用$refs属性对DOM进行操作。

beforeUpdate:发生在更新之前,响应式数据发生更新,虚拟Dom重新渲染之前被触发,可以在当前阶段更改数据。

updated:发生在更新完成之后,当前阶段组件DOM已完成更新。避免在此期间更新数据,因为这可能导致无限循环的更新。

beforeDestroy:实例销毁之前,此阶段实例完全可以被使用,进行善后收尾工作,比如清除计时器。

destroyed:发生在实例销毁之后,这个时候只剩下Dom空壳,组件已经被拆解,监听被移除等。

 

第一次页面加载会触发哪几个钩子?

beforeCreate()、created()、beforeMount()、mounted()

DOM渲染在哪个周期就已经完成?

在mounted()阶段完成,此阶段真实的Dom挂载完毕,数据完成双向绑定,可以访问到DOM节点。