Vue的生命周期及其相应的三个阶段解读
Vue的生命周期及其相应的三个阶段解读
1、生命周期的概念：
vue中的生命周期指的是 组件 从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能），我们给这些方法起了个名字叫做 生命周期钩子函数（组件钩子 ）。
2、为什么要学习生命周期？
因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途。
3、Vue生命周期的三个阶段：
Vue的生命周期分为三个阶段，分别为： 初始化，运行中 和 销毁，一共8个钩子函数。
注意： 生命周期钩子函数不允许写成箭头函数，因为这里使用箭头函数就会改变this的指向
-------------------------- 1初始化------------------------------
beforeCreate
1. 组件创建前触发，任务是为了组件的生命周期 和 组件中的事件做准备
2. 数据没有获得，真实dom也没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行一次
created
1. 组件创建结束，任务是数据注入和反应
2. 数据得到了(如果修改了数据，这里得到的也是旧数据)，真实dom没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行了一次
beforeMount
1. 组件挂载前
2. 任务： 判断el 和 template
如果el没有，那么我们需要手动挂载new Vue().$mount(’#app’)，如果有，那么判断template
如果template有，那么进行render函数，将template即jsx转成vdom
如果template没有，那么通过 outerHTML 手动书写模板
3. 数据可以获得(旧数据)，但是真实dom还没有渲染
4. 可以进行数据请求，也提供了一次数据修改的机会
5. 执行一次
mounted
1. 组件挂载结束，任务是将vdom渲染成真实dom，然后挂载到页面
2. 数据获得了(旧数据)，真实dom也获得了
3. 可以进行数据请求，也可以修改数据
4. 执行了一次
5. 可以进行真实dom的操作了（ 可以进行第三方库静态数据的实例化了 ）
综上总结：
1. 数据请求一般写在created里面（因为这里第一次得到数据）
2. 第三方库实例化我们一般会往mounted中写（静态的数据）
-------------------------- 2运行中------------------------------
触发条件：数据更新
beforeUpdate
1. 更新前
2. 任务是重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
3. 这个钩子函数更多的是内部进行一些操作，我们就不再多干预了
4. 可以触发多次
updated
1. 更新结束，任务是将patch对象渲染成真实dom
2. 真实dom得到了，数据也得到了（ 更新后的新数据）
3. 动态数据获取（ 第三方库实例化 ）
-------------------------- 3销毁------------------------------
Vue的销毁有两种形式
1. 通过开关的形式
2. 通过调用 $destroy 方法（这种还需要手动销毁dom外壳）
-------------------- vue生命周期的销毁阶段 -------------------
触发条件： 当组件销毁时：
beforeDestroy
destroyed
这两个钩子功能一致的，这两个钩子没有太大的区别
作用：
用来做善后的,比如计时器的关闭、第三方实例的删除