生命周期函数

331769-20180909094731362-16918169.png

生命周期函数就是Vue实例在某一个时间会自动执行的函数

当我们创建一个实例的时候，也就是我们调用new vue（）这条语句的时候，vue会帮助我们自动创建一个实例，穿件的过程并不像我们想的那么简单，要经过很多步骤。

• beforeCreate （el和data都没有被初始化）

  • 组件实例刚刚被创建，组件属性计算之前，如data属性等。

• created （完成了data书籍的初始化，el没有被初始化）

  • 组件实例创建完成。属性已绑定，但DOM还未生成，$el属性还不存在。

    从上图可以看到beforeCreate之行后，created也被执行了，

    Has 'el' options:是否有el这个选项

    Has 'template' optioins: 是否有template这个属性

    no->Compile el's outerHtml as template: 如果实例里面没有tempalte这个属性，会把外部el挂载点的html当作模板

    yes->Compile template into render functoin: 如果实例里面有tempalte，这个时候就会用template去渲染

    但是有了模板之后并没有直接渲染到页面上，在渲染之前，又自动到去执行了一个函数，这个函数是beforeMount

• beforeMount（完成了el和data的初始化）

  • 模板编译|挂载之前

    Create vm.$el and replace 'el' width it: 模板结合数据会被挂载到页面上，当dom挂载到页面之上，这个时候又有一个生命周期函数被执行了

• mounted （完成挂载）

  • 模板编译|挂载之后

• beforeUpdate

  • 组件更新之前

    数据发生改变，还没有被渲染之前，beforeUpdate会被执行

• updated

  • 组件更新之后

    当数据重新渲染之后，updated这个生命周期函数会被执行

• activated

  • for keep-alive，组件被激活时被调用

• deacativated

  • for keep-alive，组件被移除时被调用

• beforeDestory

  • 组件销毁前调用

• destoryed

  • 组件销毁后调用

生命周期总结：
beforecreate : 可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容