四个阶段:
- create(初始)
- mount(加载)
- update(更新)
- destroy(销毁)
八个过程:
- beforeCreate(){ }
实例初始化之前 数据没有加载 页面没有显示 - create(){ }
实例初始化后,请求到了数据,事件,属性等,但是没有加载,页面依然没有显示,在这个阶段,往往发送 ajax请求,http请求 - beforeMount(){ }
vue会将el对应的模板 加到$el中去,但是还没有挂载出去,页面没有显示 - mounted(){ }
页面加载,dom渲染 - beforeUpdate(){ }
数据更新前,在虚拟dom中使用differ算法,在内存中实现的,mounted之前的过程就不管了。如果想看属性的变化可以在这个阶段可以使用watch(属性监听)这个方法监听属性 - update(){ }
更新完了,在渲染,谁改变了渲染谁,不是整个dom树重新渲染 - beforeDestroy(){ }
销毁之前,Vm.$destroy() 进行销毁 - destroyed(){ }
销毁之后
周期适应场景:
beforeDestroy:可以在这加个loading事件,在加载实例是触发
created:初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
mouted:挂载元素,获取到DOM节点
updated:如果对数据统一处理,在这里写上相应函数
beforeDestroy:可以做一个确认停止事件的确认框
nextTick:更新数据后立即操作dom