Vue生命周期及钩子

一、前言
Vue是一个专注于视图层的一个响应式的前端框架，而且使用起来特别简单、灵活以及横向扩展性极高，跨平台，目前也广受前端开发人员以及企业的喜爱，从某种程度上能够达到高效率开发生产

二、Vue中的MVVM的框架模式

1. 我们所说的MVVM框架其实就是数据（model）、视图（view）、数据处理（vm），这三者之间的关系也就组成了MVVM框架，而且各层负责各自的功能，实现分离效果，层次分工化更加明确
2. view层主要代码就是我们前端的DOM元素
3. vm层就是负责数据处理也就是Vue实例中的方法调用，对于view层—>model层经过vm处理然后交给model层进行存放，对于model层—>view层取出数据并由vm处理交给DOM进行页面渲染
4. 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/