Vue/组件的生命周期

这篇文章借鉴了coderwhy大佬的Vue生命周期

在Vue实例化或者创建组件的过程中 内部涉及到一系列复杂的阶段 每一个阶段的前后时机都可能对应一个钩子函数 以下是我根据coderwhy大佬文章对于每一个阶段的一些看法

1.过程一

首先实例化Vue或者组件 在实例化之前 会对应一个钩子函数beforeCreate(如果未定义的话 肯定不会调用 以下同理) 在实例化之后 也会对应一个钩子函数created

2.过程二

实例化之后 会判断一下Vue实例中是否挂载了el属性(挂载意味着拿到某一个物品的控制权 可以控制它做事情) 如果挂载了 在判断一下是否挂载了template属性/组件 反之如果没有挂载el属性(即vue组件) 那就需要通过$mount(el)对Vue实例进行el元素的手动挂载 接着在判断是否存在template属性
如果存在template属性的话 那么就会先将其渲染为render函数(runtime compiler模式 即template->ast->render()->vdom->ui) 如果不存在的话 那么就是将render函数转换为虚拟dom最终生成组件ui的过程(runtime only模式 即render()->vdom->ui 该模式体积小 效率高)

3.过程三

该过程中 创建el指向的dom元素 并且将Vue实例挂载的template替换他 替换完成之时就是挂载完毕之时 在挂载前后存在两个钩子函数用于监听这两个时机
挂载(mount)完毕以后 如果template中的响应式数据发生了改变 那么需要重新渲染处vdom 和真实dom进行比对 以更新真实dom

4.过程四

当组件不再被挂载/使用时 这时候 组件就进入到了销毁阶段 而在销毁前后定义两个钩子函数用以监听这两个时机