VUE生命周期各个钩子函数的作用
- [1]一个组件或者一个实例的生命周期都是从new创建开始(new Vue)
- [2]init Events & Lifecircle:实例化之后内部会进行初始化的事件和生命周期的相关配置
- [3]beforeCreate()钩子函数:内部获取不到数据,dom元素也不能渲染出来也获取不到
- [4]created:此钩子函数,数据已经挂载,dom元素没有渲染
这个钩子函数,如果同步 修改数据,不会影响运行中钩子函数
作用:用来发送ajax请求 也可以做一些初始化时间的操作 - [5]组件或者实例去查找各自的模板,然后编译成虚拟dom放入到render函数中。
- [6]beforeMount:dom马上要渲染出来,但还没有渲染
此钩子函数和created相似,可进行ajax数据请求 - [7]render:生成好虚拟dom,去替换对应的el元素,渲染成真实的dom
一般自己不会操作这个函数,会覆盖vue本身带的render,影响页面的渲染 - [8]mounted:生命周期初始化的最后一个函数,数据已经拿到,dom节点也已经渲染出来
- [9] beforeUpdate:当数据发生改变的时候,立即执行
数据改变,只会获得更新前的值
钩子内部千万不要进行数据更改,会造成死循环 - [10]updated:钩子函数获取到的是dom更新后的内容
内部操作:生成新的虚拟dom,跟上一次的dom结构进行对比,对比出来差异后进行渲染更新 - [11]beforeDestroy:销毁前,可以在这个钩子函数中做一些善后操作,比如:清除一些事件(初始化阶段的定时器)
- [12]destroyed:销毁组件,意味着组件的双向数据绑定没了、事件监听器watch也都
但是组件的dom结构还是存在的