Vue基础 —— 生命周期

创建实例的时候：

Vue创建

• 初始化：（帮我们初始化事件，生命周期相关的成员包括h函数）
• beforeCreate钩子函数
• 初始化注入：（会把props、data、methods这些成员注入到vue的实例上）
• created钩子函数（这个钩子中我们可以访问到props、data、methods这些成员）

把模板编译成render函数

• 判断选项中是否有el选项
  • 如果没有设置就调用$mount方法，这个方法就是帮把el转换成template
• 判断有没有设置template（模板）
  • 如果没有设置，会把el元素的外层HTML作为模板
• 然后把template模板编译到渲染函数（render）中渲染函数就是用来生成虚拟DOM的

准备挂载DOM

• beforeMount钩子函数（挂载之前，这个函数中无法获取新元素的内容）
• 挂载DOM，把新的结构渲染到页面上
• mounted钩子函数（我们在这个钩子中可以访问到新的元素内容）

修改成员

• beforeUpdate钩子函数（直接访问浏览器的渲染内容还是上一次的结果）
• 进行新旧两个DOM的对比，把差异重新渲染到浏览器中
• updated钩子函数（可以访问最新的渲染内容）

销毁成员

• beforeDestory钩子函数
• 执行清理工作
• destoryed钩子函数

PS: 如果使用单文件时，模板的编译是在打包或者构建的时候完成的。不在运行的时候处理模板编译的工作。

vue始终推荐我们提前编译模板，这样的话性能会比较好。我们不需要在运行期间编译模板。