vue实例从创建到销毁的过程我们成为vue的声明周期。vue声明周期大致可以分为4个阶段8大生命周期函数,分别为:

创建前后:beforeCreate created

挂载前后:beforeMount mounted

更新前后:beforeUpdate updated

销毁前后:beforeDestory destoryed

一、beforeCreate阶段: vue实例还未创建,数据观测和事件初始化还未开始

二、created阶段: vue实例已创建,实例配置的options:datat methods watch computed等初始化配置完成,但此阶段渲染的节点还未挂载到DOM上去,所以不能访问el属性。在此阶段可以完成数据初始化、对初始化数据绑定事件的相关操作、以及发送ajax请求等

三、beforeMount阶段:在这个阶段已经编译好模板,并将data里面的数据和模板生成html,但此时还未挂载html到页面上

四、mounted阶段: 完成将模板中的html渲染到页面,在此阶段可以操作DOM元素,获取渲染元素对应的dom节点

五、beforeUpdate阶段: 在监听到数据变化之后触发,此阶段虽然已经拿到最新的数据,但还未渲染到视图上去

六、Updated阶段: 执行时已经将更新后的数据渲染到页面,在页面中可以看到最新的数据

七、beforeDestory阶段: 在实例销毁前调用,这一阶段vue实例及其配置项都还是可用状态,在这阶段可以做最后的移除定时器和事件绑定操作

八、destoryed阶段: 该阶段vue实例已完全销毁,vue所指示的所有东西都会解除绑定,事件监听器被移除,所有vue实例也会被销毁

另外还有 keep-alive 独有的生命周期,分别为 activateddeactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 activated 钩子函数。

errorCapured: 当捕获一个来自子孙组件的错误时调用 【三个参数 : 错误对象 发生错误的组件实例 以及包含错误信息来源的字符串 】 返回fals以组织错误继续向上传播

Logo

前往低代码交流专区

更多推荐