vue的生命周期和钩子函数的理解

2024-06-01 15:14:08

对于vue的生命周期，官方文档上并没有太多的文字性说明，把自己对生命周期和钩子函数的理解记录下来

官方文档

自己的理解

　　vue生命周期的概念：vue对象从被创建，到执行逻辑，最后到被销毁的过程。

　　具体流程：

　　　　　　1）vue实例的创建

　　　　　　2）初始化事件和生命周期

　　　　　　3）初始化data和methods

　　　　　　4）生成虚拟dom $el(将没有解析的指令的dom加载到内存中)

　　　　　　5）使用$el 来替代el，并且将$el中的指令进行解析

　　　　　　6）进行状态mounted的循环

　　　　　　　判断data中的数据是否发生改变，如果改变，则跟新虚拟dom 并且重新渲染，重新进入mounted状态

　　　　　　7）vue实例的销毁

　　钩子函数的概念：vue为我们准备的空函数，函数中的内容可以融入到生命周期中，通俗的来说，就是vue执行生命周期的过程中，有很多的逻辑代码，将来有可能有需求：在某一段逻辑代码中添加自己的代码，为了解决这一问题。

　　函数：

　　　　1）在初始化data和methods时执行

　　　　　　之前：beforeCreate

　　　　　　之后：Created（重点）

　　　　2）在使用虚拟dom替换el时执行

　　　　　　之前：beforeMount

　　　　　　之后：mounted（重点）

　　　　3）当数据发生改变时，重新渲染虚拟dom时执行

　　　　　　之前：beforeUpdated

　　　　　　之后：updated

　　　　4）当调用$destory方法时执行（$destory销毁vue实例）

　　　　　　之前：beforeDestroy

　　　　　　之后：destroy

总结：

　　将生命周期和其对应的钩子函数对应的记忆，可以更容易的理解vue的生命周期

转载于:https://www.cnblogs.com/zhige-1/p/11002066.html

vue的生命周期和钩子函数的理解相关推荐

初探 Vue 生命周期和钩子函数
生命周期生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数. 简单来说就是好像把人的出生到死亡分成一个个阶段,你取名字肯定是在你出生阶段,而不是在成年阶段:你结婚肯定是在成年阶段,而不是在 ...
[vue] 你有写过自定义指令吗？自定义指令的生命周期（钩子函数）有哪些？
[vue] 你有写过自定义指令吗?自定义指令的生命周期(钩子函数)有哪些? bind inserted update componentUpdated unbind 个人简介我是歌谣,欢迎和大家一起 ...
Vue的过滤器,生命周期的钩子函数和使用Vue-router
一.过滤器 1.局部过滤器在当前组件内部使用过滤器给某些数据添油加醋 //声明 filters:{'过滤器的名字':function(val,a,b){//a 就是alax ,val就是当前的数 ...
vue学习之生命周期，钩子函数执行顺序
vue的生命周期,钩子函授执行顺序一般的执行顺序(从上往下): beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用 ...
vue 声明周期函数_Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...
Vue组件的生命周期以及钩子函数的作用
什么叫做生命周期一个组件从创建到销毁的过程叫做组件生命周期. Vue在生命周期中提供了一些函数可以在其内部实现一些业务逻辑并且这些函数会在一些特定的场合下执行. 组件的生命周期钩子函数大致可以分为三 ...
vue知识（四）生命周期、钩子函数、路由
文章目录一.生命周期 (一)vue生命周期二.钩子函数 (一)钩子函数 (二)4大阶段8个方法 (1)如何知道vue生命周期到达了什么阶段? (2)钩子函数有哪些 (三)初始化 (1)new Vu ...
Vue生命周期及其钩子函数
vue的生命周期.生命周期函数,又叫钩子函数生命周期钩子===生命周期函数===生命周期事件目录一.Vue生命周期 1.vue实例从创建到销毁的过程 2.vue生命周期有4个阶段 3.父子 ...
Vue2.0 探索之路——生命周期和钩子函数的一些理解
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什 ...

最新文章

热门文章