众所周知。
Vue生命周期分为八个阶段。 结合Vue官方循环图标，可以更有效地食用本博客。
1.BeforeCreate ()
Vue实例已经创建，但尚未初始化data、methods的数据和方法。 这意味着可以在beforeCreated中获取this。 this指向当前Vue实例或组件，但无法检索this.data、this.method。
2 .创建() )
在UE中，data和method已初始化。 通常使用此挂接函数初始化数据。
在此阶段之后和BeforeMounte之前运行了render函数。 Vue将代码渲染为内存中的DOM，即虚拟DOM。 未挂载在页面上。
然后，在beforeMount之前，Vue构造函数会检查配置条目是否具有el属性。 如果有，请替换html文档中的节点。 判断是否指定了template选项，如果有，用节点替换template，如果没有，用el替换节点。
3.BeforeMount ) )函数中，页面中是未被虚拟dom替换的前一个dom
打栗子
letVM=newvue(El:(#app )，data: ) message: ) wxs )，arr : (1，2，3 )，obj: ) name3360 ) wxs befofon watch:{ }，template 3360 ` divid=' app ' div { { message } }/div div { { arr [0] }/div div { { obj.name } }/div
4.Mounted ) )页面显示被替换的元素。
以上是正在创建Vue组件的挂接函数
组件运行中的挂接函数如下所示。
5.beforeUpdate ) )触发此挂接函数的方式是更改data的值。 此挂接函数还可以获取更新前的值。
此挂接函数没有更新接口，但更新了data值。（总结：旧页面，新数据）
在beforeupdate和update之前，Vue在内存中偷偷重新渲染和装载了Virtual Dom。
6.update ) )此挂接允许您获取新接口的值和新数据值。（总结：新界面，新数据）
测试代码和屏幕截图
let comp={ template : ' div div { { msg } }/divbuttonref=' BTN ' @ click=' change '更改/button/div '，data () beforeUpdate ) ) console.log ) document.getelementbying updated () console.log ) document.getelementbyid('app ' )
接下来是销毁阶段
7.beforedestroy ()进入实例销毁阶段。 实例中的所有数据和方法仍然可用。
8 .发现()函数。 实例被销毁，所有数据和方法都不可用。