详细聊聊Vue生命周期的那些事

前言

如今学习Vue的人越来越多了，Vue框架或React框架的学习也成为开发了前端开发人员的必备技能，今天我们就来聊聊Vue中的生命周期函数，Vue中生命周期函数的参考价值很高，让我们来一起认识它吧~

一、Vue2中的生命周期

实例的生命周期

在介绍生命周期之前，我们需要知道在Vue中要渲染一块页面内容的时候，会有下面这几个过程：

1. 解析语法生成 AST。
2. 根据 AST 结果，完成 data 数据初始化。
3. 根据 AST 结果和 data 数据绑定情况，生成虚拟 DOM。
4. 将虚拟 DOM 生成真正的 DOM 插入到页面中，此时页面会被渲染。

当我们绑定的数据进行更新的时候，又会产生以下这些过程：

1. 框架接收到数据变更的事件，根据数据生成新的虚拟 DOM 树。比较新旧两棵虚拟 DOM 树，得到差异。
2. 把差异应用到真正的 DOM 树上，即根据差异来更新页面内容。

当我们清空页面内容时，还有：

1. 注销实例，清空页面内容，移除绑定事件、监听器等。

Vue为实例提供的生命周期函数一共有8个：

1. beforeCreate(): 初始化实例前，data、methods等不可获取
   下载地址:
   vue项目实现登陆注册效果
   js实现简单手风琴效果