vue生命周期是什么
很普遍的一个vue知识点问题,面试的时候也会问到,答案当然就是,Vue组件实例从创建到销毁的一个过程,可以在这个过程中执行JS代码,在不同的时刻进行不同的操作
vue生命周期都有什么呢
beforeCreate (实例创建前)
created (实例创建后)
beforeMount (挂载前)
mounted (挂载后)
beforeUpdate (数据更新前)
updated (数据更新后)
beforeDestroy (销毁前)
destroyed(销毁后)
beforeCreate (实例创建前)
该阶段组件未被创建,也无法访问数据,均为undefined
created (实例创建后)
该阶段数据已经进行绑定组件也已经创建完成,组件中的data对象已经存在,可以对data进行操作,但是HTML模板还未被渲染,所以el为undefined,一般情况下在该阶段就会将进行数据初始化,和数据请求,请求接口赋值。
beforeMount (挂载前)
该阶段HTML模板还未被渲染,但是可以操作data数据
mounted (挂载后)
该阶段是页面渲染完成后执行,可以获取到数据以及节点 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以在 mounted 内部使用 vm.$nextTick:
beforeUpdate (数据更新前)
该阶段是在数据发生改变之前使用,你可以在该阶段保存某个数据更新之前的值,后面如果再用到可以直接使用。在有特殊需求的情况下,可以将更新之前的数据存起来,放到后面去使用。
updated (数据更新后)
该阶段是在数据发生改变之后,数据已经渲染到DOM,即监控数据的变化,当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之
BeforeDestroy(销毁前)
该函数在实例销毁之前调用,这里的 ref 依旧可以操作,实例仍然完全可用,可以在这里做清除定时器的操作,防止内存泄漏。
Destroyed(销毁后)
该函数在组件销毁的时候执行,即实例销毁后调用,这里的 ref 不存在。
该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。