vue基础--vue的生命周期

一、什么是Vue生命周期

 Vue实例从创建到销毁的过程。 vue的每个组件从创建到销毁都会经历  是系统特定的过程，就是vue的生命周期。

二、生命周期介绍

1.阶段 

vue的生命周期可以简单的分为四个阶段：创建阶段，挂载阶段，更新阶段，销毁阶段。

• 创建阶段--beforeCreate，created
• 挂载阶段--beforeMount，mounted
• 更新阶段--beforeUpdate，updated
• 销毁阶段--beforeDestroy，destroyed

2.作用

• 创建后 发起Ajax请求
• 挂载后操作dom
• 添加事件监听
• 销毁前移除间隔调用 事件监听

tips：不是每个生命周期都必须使用

三、生命周期详解

1.创建阶段

        创建阶段可以看做一个vue实例生命周期的开始，这个阶段 vue组件开始初始化，vue开始观察数据，这个阶段有 beforeCreate 和 created 两个生命周期钩子函数。 

 （1）beforeCreate  创建前
          特点：有this，但此时data、methods、computed以及watch上的数据和方法还未初始化，都不能被访问。

 （2） created   创建后
            特点：此时的data 和 methods 都已经被初始化，但是没有$el，dom节点
            作用：ajax请求 定时器 事件监听（window）

2.挂载阶段

这个阶段将实现 DOM 的挂载，这标志着我们可以在浏览器里中看到页面了。 

（1） beforeMount 挂载前
    特点： template 模板已导入渲染函数编译。此时虚拟Dom已经创建完成，即将开始渲染。在这一阶段也可以对数据进行更改。

（2）mounted   挂载后
    特点：在挂载完成后发生，此时真实的Dom挂载完毕，数据完成双向绑定，可以访问到、

              Dom节点，使用$refs属性对Dom进行操作。
    作用：操作节点,ajax请求 

3.更新阶段

（1）beforeUpdate  更新前
    特点：会执行多次  数据更新 dom节点没有更新

（2） updated  更新完毕
    特点：会执行多次 数据更新，dom节点也更新

4.销毁阶段 

 （1）beforeDestroy  销毁前
    特点：数据可以更新 视图已经不更新
    作用：移除事件监听 停止定时器

（2）destoryed   销毁完毕
    特点：没有this,切换视图与vue实例的联系

四、生命周期图例