Vue的生命周期函数
vue生命周期:vue组件从创建到销毁,经历的过程
生命总共分为4大阶段创建前/后、载入前/后、 更新前/后、销毁前/后
一共有8个方法(函数)
创建前后
1.在beforeCreate阶段,vue实例的挂载元素el和数据对象data都为undefined,还未初始化。
beforeCreate(创建vue实例前的钩子函数,相当于是vue组件出生之前,此函数用的比较少)
2.在created阶段,vue实例的数据data有了,el还没有挂载。
created(实例创建完成之后的钩子函数 ,最适合发送请求,Ajax等 )
注:创建阶段:主要是处理数据(主要:对数据进行挟持,把data对象上的数据挂到了this实例上)!!
挂载前后
1.在beforeMount阶段,vue实例的$el和data都初始化了,但还没有挂载之前都是虚拟的demo阶段,data.message还未替换.
beforeMount(开始挂载编译生成的HTML到对应的位置时触发的钩子函数,此时还没有将编译出的html渲染到页面上,el已经初始化,但还没有渲染DOM)
2.在mounted阶段,vue实例挂载完后,data.message成功渲染.
mounted(将编译好的html挂载到页面完成后执行的钩子函数,此时可以进行发送ajax请求获取数据的操作进行数据初始化,注意:mounted在整个实例生命内只执行一次,最适合操作Dom的函数,渲染DOM完成)
注:挂载阶段:主要是合成数据和视图模板,先在内存完成虚拟dom解析,最后一次dom操作直接更新到页面。
更新前/后
1.当data变化后,针对视图发生更新前触发beforeUpdata方法
2.当data变化后,针对视图发生更新后触发updata方法。
注:更新阶段:主要是完成对视图的动态修改。
销毁前/后
此销毁表示离开此组件(路由切换)
1.beforeDestroy,vue实例销毁之前执行的钩子函数
2.destroyed实例销毁执行的钩子函数
在执行destroyed方法后,对data的改变不会再触发周期函数,说明此时vue实例已经结束了事件监听以及和dom的绑定,但是dom结构依然存在。
注:销毁阶段:主要是完成对组件的回收。