初识vue | vue的生命周期和双向绑定原理

vue面试必问两题

“你用过vue?那你说说vue的生命周期和双向绑定原理(mvvm模式)?”
如果你的简历中有使用vue的相关经历,那面试官这两个问题你肯定逃不了。

生命四部曲

vue的生命四部曲无非是:创建-挂载-更新-销毁
答出这点恐怕很难让面试官眼前一新,如果要使他满意,你至少需要说出较为完整的过程。

1.创建实例。创建实例首先是执行init(vue自带组件),在init的过程当中首先调用了beforeCreate,然后在injections(注射)和reactivity(反应性)的时候,它会再去调用created。
2.函数解析。当created完成之后,它会去判断instance(实例)里面是否含有“el”选项,如果没有的话,它会调用vm.$mount(el)这个方法,然后执行下一步;如果有的话,直接执行下一步。紧接着会判断是否含有“template”这个选项,如果有的话,它会把template解析成一个render函数 ,这是一个template编译的过程,结果是解析成了render函数。render函数传参包含div,对象,以及div里的内容。
3.挂载钩子。beforeMount在有了render函数之后才会执行,当执行完render function之后,就会调用mounted这个钩子,在mounted挂载完毕之后,这个实例就算是走完流程了。
4.更新与销毁。更新与销毁是需要外部命令才实现的钩子函数。比如说有数据的变化,会调用beforeUpdate,然后经过Virtual DOM,最后updated更新完毕。当组件被销毁的时候,它会调用beforeDestory,以及destoryed。

附上这张被人引用烂了的图。。
初识vue | vue的生命周期和双向绑定原理

双向绑定原理

当我们在后台修改代码时,网页随即更新数据变化,这种模式(mvvm)我们称为vue的双向绑定

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。

初识vue | vue的生命周期和双向绑定原理初识vue | vue的生命周期和双向绑定原理 Matthunt 发布了4 篇原创文章 · 获赞 0 · 访问量 26 私信 关注
上一篇:Vue-first


下一篇:Android开发 ViewModel_3_ViewModelProviders过时了请使用ViewModelProvider