vue的生命周期

vue的生命周期是什么

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。

vue的钩子函数

beforeCreate（创建前）：此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

 

created（创建后）：实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化。注意！el并没有开始挂载。 

 

beforemount(挂载前)：el挂载开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还在内存上运行还没有挂在html到页面上。

 

mounted(挂载后)：挂载完成，也就是内存模板中的HTML数据渲染到网页HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

 

beforeUpdate(更新前)：更新数据时触发，页面中的数据是旧的，但是内存中的数据已经发生了变化，但还没有渲染到页面。一般beforeupdate 里不建议进行数据的修改，因为update执行前就以及形成了他的virtual DOM,DOM准备渲染的时候，参数也进行修改，容易出现了死循环。就是在beforeupdate的时候不能进行数据和虚拟DOM的修改，不然就会造成 ‘更新数据的时间去更新数据’ 必然出现死循环

 

Update(更新后)：页面和内存中的数据保持同步都是最新的

 

beforeDestroy(销毁前)：在实例销毁之前调用，实例仍然完全可用，这一步还可以用this来获取实例，一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

 

destroyed(销毁后)：在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

 

 

 

 

材料来源于网络，整理方便回顾