Vue 实例的生命周期

作者: 天字一等 | 来源:发表于2018-08-21 12:51 被阅读24次

Vue.js入门（二）：生命周期
vue学习第二课之vue的生命周期
vue生命周期
10、Vue_生命周期
Vue生命周期
一、vue基础知识点
Vue
VUE实例生命周期钩子
前端之路-VUE面试题
2.Vue实例生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列
过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

生命周期小结
生命周期钩子的一些使用方法：
我的总结：

1、mounted只会在加载页面的时候执行一次
2、created:会多次执行
3、updated:如果需要对渲染完成的dom树进行操作，可以在update里进行

beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数  。如果需要对渲染完成的dom树进行操作，可以在update里进行
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

代码实例生命周期、钩子函数：转载自：https://www.jianshu.com/p/ea452d3a1671

vue2.x————生命周期与钩子函数

兲坈关注

2017.05.26 20:28* 字数 1209 阅读 353评论 0喜欢 8

vue2.x————生命周期与钩子函数

前言

现在已经越来越多的人开始使用vue了，vuex+vue-router+axios进行开发成为了趋势，很多人能够快速的进行开发以及和后端做数据的交互，但是对于所谓的生命周期就不知道是什么东西了。于是经过查看API文档以及网上众多的文章查询，还有亲身试验，总结了一下以下经验

vue1.x 与 vue2.0的生命周期是有区别的，但基本上我们都是使用vue2.0，如果之前使用了1.x版本开发的小伙伴可以去官网查看一下如何迁移vue官方文档（从vue1.x迁移）

vue1.x钩子函数可以总共分为9个阶段：

init ----- 在实例开始初始化时同时调用。此时数据观测。事件和watcher都尚未初始化。
created ----- 在实例化创建之后会不调用，此时实例已经结束解析选项，已建立:数据绑定、计算属性、方法、Watcher/事件回调，但是还没有开始DOM编译，$el还不存在
beforeCompile ----- 在编译开始前调用
compiled ----- 在编译结束后调用。此时所有指令已经生效，因此数据的变化将触发DOM更新，但$el的数据尚未渲染到页面上
ready ----- 在编译结束和$el第一次插入文档后调用
attached ----- vm.$el插入Dom时调用
detached ----- vm. $el 从DOM中删除时调用。必须是由指令或实例方法删除，直接操作vm.$ el不会触发
destroyed ----- 在实例被销毁之后调用，此时所有的绑定和实例的指令已经解绑，所有子实例已经销毁
9.destroyed ----- 在实例开始销毁之后调用，此时所有的绑定和实例的指令已经解绑，所有实例已经销毁

image

vue2.0钩子函数可以总共分为8个阶段

beforeCreate（创建前）----- 2.0版本中新增beforeCreate,在实例初始化之后，数据观察(data observer)和event/watcher事件配置之前被调用。
created（创建后）
beforeMount(载入前) ----- 2.0版本中新增beforeMount，是在Watcher之前、模板编译成render方法之后调用，相关render首次被调用。该钩子函数在服务器渲染期间不被调用。
mounted（载入后）
beforeUpdate（更新前） ----- 2.0版本中新增beforeUpdate,是在DOM树生成之前、虚拟DOM树生成之后调用，调用条件是这个vm实例已经mounted过。该钩子函数在服务器渲染期间不被调用。
updated（更新后）----- 2.0版本中新增updated，在DOM树生成之后调用，调用条件是这个vm实例已经mounted过。该钩子函数在服务器渲染期间不被调用。
beforeDestroy（销毁前）
destroyed（销毁后）

image

现在的vue最新的版本是2.3.3 基本上与 vue2.0差距不大，在生命周期与钩子函数上基本一样

下面将结合代码去看看钩子函数的执行顺序

HTML代码部分

    <div id="app">
        <input type="text" v-model='message' name="" id="" value="" />
        <div>{{message}}</div>
    </div>

js代码部分

beforecreate:

var app = new Vue({
    el: '#app',
    data: {
        message: "my name is shalien"
    },
    beforeCreate:function () {
         console.group('beforeCreate 创建前状态=========》'); 
         console.log( "el : " + this.$el); //undefined 
         console.log("data : " + this.$data); //undefined
         console.log("message: " + this.message)
    },
    created:function () {
         console.group('created 创建完毕状态===========》');  
         console.log("el : " + this.$el); //undefined
         console.log("data : " + this.$data); //已被初始化
         console.log("message: " + this.message); //已被初始化
    },
    beforeMount:function  () {
         console.group('beforeMount 挂载前状态=========》');
         console.log("el : " + (this.$el)); //已被初始化
         console.log(this.$el); 
         console.log("data : " + this.$data); //已被初始化 
         console.log("message: " + this.message); //已被初始化
    },
    mounted:function () {
        console.group('mounted 挂载结束状态==========》'); 
        console.log("el : " + this.$el); //已被初始化
        console.log(this.$el); 
        console.log("data : " + this.$data); //已被初始化                
        console.log("message: " + this.message); //已被初始化
    },
    beforeUpdate:function () {
        console.group('beforeUpdate 更新前状态=========》');  console.log("el : " + this.$el); 
        console.log(this.$el);
        console.log("data : " + this.$data);
        console.log("message: " + this.message);
    },
    updated:function () {
         console.group('updated 更新完成状态===========》');  console.log("el : " + this.$el);
         console.log(this.$el); 
         console.log("data : " + this.$data); 
         console.log("message: " + this.message);
    },
    beforeDestroy:function () {
         console.group('beforeDestroy 销毁前状态=========》');  
         console.log("el : " + this.$el);
         console.log(this.$el);
         console.log("data : " + this.$data); 
         console.log("message: " + this.message);
    },
    destroyed:function () {
        console.group('destroyed 销毁完成状态==========》'); 
        console.log("el : " + this.$el); 
        console.log(this.$el); 
        console.log("data : " + this.$data);
        console.log("message: " + this.message)
    }
}

在浏览器中进行运行，就会出现我们看到各个时间段的触发，我这里使用的是Chrome浏览器，在控制台中进行输出的样子显示出嵌套的结构，看起来非常的清晰

image

beforecreated:el和data尚未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化在挂载前状态的时候获取的el值里面还是只有表达式{{message}}这个是使用了虚拟dom技术占据位置，当mounted挂载的时候再把值渲染进去
mounted ：完成挂载

当数据发生变化时，如更改data里的message 的值

image

可以看到，当message里的值被修改的时候，触发updata的函数

destroy销毁
我们可以通过app.$destroy对vue的实例进行销毁，销毁完成之后该实例将不会对所挂载的函数进行响应，但是原本生成的dom元素及渲染出来的值还是存在的，执行了detrory操作之后，vue将不能控制

image

生命周期大概就是这些，那么应该在什么时候使用什么函数呢，这个还是那句，看情况而定例如在
beforecreate : 可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory：你确认删除XX吗？
destoryed ：当前组件已被删除，清空相关内容
等........当然更多操作还是得让各位按照各自需求去做了
文章如有错误还请大牛指正！！