vue 的生命周期再次理解
重点1:
生命周期的钩子函数,不能使用箭头函数。
重点2:
每个周期的作用以及应用场景:
beforeCreate: 数据渲染之前,data里面的数据还没赋值到定义的变量上,Dom树也没有开始渲染。
应用场景:相当于刚进入页面,可以加一些加载中的样式,等待全部渲染完毕,再关闭加载中动画。
create:数据渲染完毕,data里面定义的变量开始有值,但Dom树依然没有开始渲染。
应用场景:比如,需要依赖一些接口的数据来,渲染页面,可以在这里调用接口。
beforeMount:data的数据都已经有值,Dom也开始渲染,只是没有渲染完毕。
应用场景:感觉跟create的周期差不多,因为即使在这里有实例了,但依然是undefined。渲染页面需要的数据,尽量在这之前,全部赋值完毕。
mounted:Data的数据已经有值,Dom全部渲染完毕。
应用场景: 页面全部渲染完毕,之后的操作,这个看实际应用来,常用的生命周期。
beforeUpdate: 在函数中操作更改数据,data的数据变化都会触发这个钩子,在这之前还可以再次更改数据,但这并不会造成页面再次渲染,因为此时,对于Vue来说,数据还没真正改变 。
应用场景:这里有这一种监听数据变化的作用,也可以说是拦截,并修改,一般不建议这里修改,数据变化就触发,就有可能一直触发,造成死循环。
update:数据更改完毕,Dom也已经重新渲染完毕,执行该钩子。
应用场景:更新完数据之后,统一需要执行的操作。如果只是改变 数据,Dom没有重新渲染是不会执行这里的方法的。
beforeDestory: 实例销毁之前,我的理解是离开当前页面之前,离开当前页面之后就销毁了,在这之前,定义的数据都可以用。
应用场景: 设置的定时器,可以在此清除掉。离开页面之前进行的一些操作。销毁一些东西。
destroy:实例彻底销毁,离开当前页面跳到其他的页面了。