Vue实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会。
页面一加载触的周期函数如下:
触发了前四个生命周期函数
beforeCreate 创建之前
created 创建完成
beforeMount 挂载之前
mounted 挂载
简单理解VUE生命周期:
生命周期就是vue实例从创建到销毁的过程。在页面一进来会走前四个,当数据发生变化会走更新期的那两个,当vue实例被销毁会走销毁期的那两个。
(1) beforeCreate(){ } // 创建之前,全都是undefined
(2) created(){ } // 创建完成,数据有了,但是挂载点还没有找到
(3) beforeMount(){ } // 挂载之前,数据有了,挂载点也找到了,但是双花括号指令等都没有被解析
(4) mounted(){ } // 挂载完成,数据有了,挂载点也找到了,DOM已经加载渲染完毕,我们一般在这里做数据交互、开启定时器、开启倒计时
(5) beforeUpdate(){ } // 视图更新之前,在这里获取的数据是新的数据
(6) updated(){ } // 视图更新完成,在这里获取的数据是新的数据
(7) beforeDestroy(){ } // 销毁之前,我们一般在这里清除定时器、清除倒计时
(8) destroyed(){ } // 销毁完成
vm.$destroy() // 销毁
vm.$mount() // 挂载
Vue生命周期经常调用Ajax函数:
在created的时候已经含有了data和methods,可以在created中调用Ajax。
个人习惯在mounted中调用Ajax,这个时候虚拟数据已经替换成了真实数据,调用接口结束之后,可能会操作dom,所以在mounted中调用。
在mounted中我们可以使用大量的异步操作