Vue的声明周期函数,就是一个组件从创建到销毁的过程,也叫生命周期钩子函数,这些函数都是主动调用的同步函数,按照一定的顺序执行,
Vue 的生命周期过程有四个,对应八个生命周期函数,分别为:
创建过程, beforeCreate创建前和创建后created
渲染过程, beforeMount渲染前 和 渲染后mounted
更新过程 beforeUpdate更新前 和 更新后updated
销毁过程 beforeDestroy销毁前 和 销毁后destroyed
1.创建前 beforeCreate()
在此生命周期函数中,vue已经开辟了内存空间,储存vue对象,可以通过this指针指向这个对象,但是对象还没有完成创建,data实例和数据也并未挂载到对象上,也就是说通过this不能访问data数据,也不能访问自定义函数,和根组件,可以在此函数中,进行各种初始化的操作,比如定义全局变量等。
2.创建后 created()
在此生命周期函数中,vue对象已经完成创建,vue对象的data数据源methods函数可以正常使用,但是没有渲染,不能访问DOM,可以在此函数中请求数据,更新vue中data数据,定义全局变量,事实上,在beforeCreate()后都可以发请求,但是请求需要响应时间,越早发越有利,
3.渲染前 beforeMount()
在此生命周期函数中,vue已经创建出来可以使用的模板节点,生成完整dom树,但是节点仍未解析数据源,节点值也是未解析的数据,(写的什么就是什么,例如{{变量名}}这种形式)。
可以发请求,找dom 但是vue不建议直接元素js找dom,可以使用ref绑定,通过this.$refs找元素
4.渲染后 mounted()
在此函数中所有的数据和视图已经渲染完成,数据变成解析后的变量名。
在此函数中可以实现dom的任何操作,也可以发送事件向父组件传值
5.更新前 beforeUpdate()
当vue中data数据发生变化,但是视图上通过DOM获取节点值的时候,节点值还未更新。
可以在此函数中判断更新前后数据,来拦截组件更新
6.更新后 updated()
在此函数中vuedata数据和视图界面的DOM数据已经保持同步。
可以在此函数中获取dom最新值,重新请求数据。
7.销毁前 beforeDestroy()
此函数中vue对象还没有销毁,数据和DOM都存在,但在此函数内数据和视图已经不能再更新了,
可以在此函数中关闭计时器,注意定时器哪怕组件销毁也不会自动关闭,需要手动进行关闭,因为定时器是异步执行的。还可以移出事件,还有把全局变量设置为空释放内存空间。
8.销毁后 destroyed()
在此函数中 组件对象已经销毁,数据和dom仍然存在,
仍然可以进行,销毁定时器,事件移除,和全局变量置位为null释放掉等操作。