Vue的生命周期-基础

• vue的实例从初始化到销毁的过程
• 在特定的阶段执行不同的钩子函数

注意点vue的所有钩子函数都是自动绑定到thiss的上下文上，所以钩子函数使用箭头函数的话，就会发生this指向父级作用域，

1. beforeCreate ：创建前的状态

• 在本事件执行之前初始化生命周期和一些事件
• init执行初始化实例，首先执行beforeCreate生命周期函数

beforeCreate(){
    console.log(document.getElementsByTagName("li"))//啥玩意也没有
    console.group('beforeCreate 创建前状态===============》');
    console.log(this.$el); //undefined
    console.log(this.$data); //undefined
}

2. created ：创建完毕状态

• 遍历data，实现响应式
• 在这里一般用于请求数据，因这个函数执行的时候，dom还没有挂载，有机会进行请求修改数据，从而直接进行渲染
• injections(注射)和reactivity(反应性)会调用created

created(){
    console.log(document.getElementsByTagName("li"));// 啥玩意也没有
    console.log(this.$el);// undefined
    console.log(this.$data);// 已被初始化
}

3. beforeMount ： DOM挂载之前

判断instance(实例)里面是否有"el"optin(选项)，如果没有就会执行vm.$count这个方法，然后执行下一步， 如果有直接执行下一步，紧接着会判断template这个选项，如果有，它会把template解析成一个rander函数，这是一个template编译的过程

4. mounted ： DOM挂载之后

把vue实例生成的虚拟DOM挂载真实的dom
在mounted挂载完毕之后，这个实例就算是走完流程了

来个表格吧

生命周期钩子	组件状态	最佳实践
beforeCreate	实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据	常用于初始化非响应式变量
created	实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到ref属性内容为空数组	常用于简单的ajax请求，页面的初始化
beforeMount	在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数	–
mounted	实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问	常用于获取VNode信息和操作，ajax请求
beforeupdate	响应式数据更新时调用，发生在虚拟DOM打补丁之前	适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
updated	虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作	避免在这个钩子函数中操作数据，可能陷入死循环
beforeDestroy	实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例	常用于销毁定时器、解绑全局事件、销毁插件对象等操作
destroyed	实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁	–

参考文章