Vue小结(三): vue的钩子函数实现机制

最新推荐文章于 2022-04-24 11:39:56 发布

原创

最新推荐文章于 2022-04-24 11:39:56 发布 · 816 阅读

0 ·

CC 4.0 BY-SA版权

本文探讨Vue的生命周期，从beforeCreate到destroy，详细阐述每个阶段的作用。在beforeCreate阶段，数据和方法已初始化；created阶段，实例创建完成，但未挂载；beforeMount在挂载前调用；mounted表示DOM已挂载；beforeUpdate在数据更新但DOM未更新时触发；updated则在DOM更新后；beforeDestroy表示实例可用但即将销毁；而destroyed后，实例无法使用。同时提到了computed和watch的使用规则。

一.什么是vue的生命周期？

vue实例或者组件 从 创建到使用 最后销毁的这个过程叫做vue的生命周期函数。
具体从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期
在这里插入图片描述

1. beforeCreate: 在实例初始化后被调用;
this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；
2. created: 实例已经创建完成;
可以操作vue实例中的数据和各种方法，但是还不能对"dom"节点进行操作;

3. beforeMount：
在挂载开始前被调用 render函数第一次被调用
4. mounted:
挂载完毕，这时候可以使用 dom 节点 ，一些需要dom的操作这时候才可以进行
5. beforeUpdate
组件更新前也就是说数据更新了但是vue中的组件（事件）对应dom 内部中的数据没有变所以说叫做组件更新前
6. updated
组件更新完成之后的操作
vue中的组件（事件）已经对应dom 内部中的数据了
7. beforeDestroy
实例销毁之前调用 ，在