一、前言
Vue是一个专注于视图层的一个响应式的前端框架,而且使用起来特别简单、灵活以及横向扩展性极高,跨平台,目前也广受前端开发人员以及企业的喜爱,从某种程度上能够达到高效率开发生产
二、Vue中的MVVM的框架模式
- 我们所说的MVVM框架其实就是数据(model)、视图(view)、数据处理(vm),这三者之间的关系也就组成了MVVM框架,而且各层负责各自的功能,实现分离效果,层次分工化更加明确
- view层主要代码就是我们前端的DOM元素
- vm层就是负责数据处理也就是Vue实例中的方法调用,对于view层—>model层经过vm处理然后交给model层进行存放,对于model层—>view层取出数据并由vm处理交给DOM进行页面渲染
- Model层主要就是存放页面中的单独数据
三、Vue生命周期及钩子介绍
首先参考官方文档给出的对应生命周期示例图
- 对应的beforeCreate()、created()、beforeMount()、Mounted()、beforeUpdate()、updated()、beforeDestroy()、destroyed()的这些函数都是在Vue实例化创建过程中以及创建完成内置的钩子函数,每个钩子函数对应着Vue实例在初始化及之后不同阶段可以进行调用处理一些事件函数
- beforeCreate函数在初始化阶段形成,这个阶段对应的Vue中的元素绑定(el),data()还未被初始化到
var vm = new Vue({
el:"#app",
data:{
msg:"hello henry!"
},
beforeCreate(){
console.log("beforeCreate方法被执行");
console.log(this.msg);
}
})
- created函数到这个阶段对应的el、data数据已经注入到Vue实例中,可以进行调用,同上进行逻辑操作即可
created(){
console.log("created方法被执行");
console.log(this.msg);
}
-
created函数之后回去判断在实例中是否有指定的模板引擎绑定el,若无则使用el指定的标签域来作为模板引擎
-
beforeMount函数在模板引擎还未挂在到浏览器的时候就会调用,这个时候浏览器是看不到浏览器展示内容的
-
mounted函数阶段该浏览器DOM已经展示基本就形成了Vue实例对象的阶段
-
当检测到页面数据被改动的时候会到beforeUpdate及update两个阶段,一个变化前一个变化后
-
beforeUpdata方法调用阶段,data数据被改变但页面数据还是原始状态
-
当虚拟DOM重新渲染到页面后执行Updated方法,data数据与页面数据一致
-
运行到beforeDestroy方法时,Vue对象准备销毁过程,但是还未被销毁对应的方法属性能够正常使用
-
destroyed对象被销毁生命周期结束
详细内容参考Vue官方文档:https://cn.vuejs.org/v2/guide/