对Vue生命周期钩子函数的理解

对Vue生命周期钩子函数的理解

实例创建之后,初始化事件和生命周期,而后触发beforeCreate。beforeCreate,当前实例创建之前,很少操作,一般用于加载动画,比如创建一个旋转动画。created表示当前实例创建完成,组件、属性等初始化完成,一般封装一个方法,从网络请求数据。该方法调用,触发回调,关闭beforeCreated中的旋转加载动画。当前实例创建完成,页面还未渲染未显示,拿不到DOM元素。而后,判断实例中是否有el属性(挂载点),如果有,继续往下;如果没有,然后判断是不是有vm. m o u n t t e m p l a t e b e f o r e M o u n t v m . mount,两者二选其一,接着判断有没有template,如果有,触发渲染函数,进入beforeMount,表示将要挂载,页面仍未显示,接着创建vm. el,接着触发mounted,此时可以操作dom,beforeUpdate与update保持数据与页面的同步,会频繁触发,一般不要进行操作。接下来,destroyed表示组件销毁,destroy的中一般用于取消计时器、观察者等等。## 标题

附带图片理解

在这里插入图片描述

1)beforeCreat
组件实例将要被创建,这个时候可以加载一个动画效果。
2)created
组件实例被创建之后,可以访问到实例中data属性和methods方法,但是没有被渲染,所以无法操作DOM,$el是undefined。这时候可以向服务器发起请求
3)beforeMount
组件实例将要被挂载但是还没有挂载,页面未显示,在开发中一般很少用。
4)mounted
组件实例被挂载,页面已经被渲染,页面显示,可以操作DOM。此时也可以向服务器发送请求
5)beforeUpdate
组件将要更新
6)updated
组件更新之后,可以操作DOM
注意:
data数据发生变化,就会触发updated钩子函数,进行页面渲染,引起视图变化。由于触发频率很高,我们很少操作,即使操作,也要保证内部方法轻量级。
7)beforeDestroy
组件将要销毁
8)destroyed
组件已经被销毁,经常在该时机移出耗时操作,比如计时器等

猜你喜欢

转载自blog.csdn.net/qq_43634982/article/details/83864808