编程知识 cdmana.com

Vue学习——生命周期(25)

简介

生命周期(LifeCycle)是指一个组件从创建->运行->销毁的整个阶段
生命周期函数:是由vue框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行,开发者可以在这几个阶段写入一些代码当作提示等用处执行。

在这里插入图片描述

这是vue官网上的生命周期图示
在这里插入图片描述

webpack先读取main.js,在main.js里面发现用到了app.vue,然后在app.vue里面又用到了其它的组件,最后将这几个用到的文件,生成几个文件,被放到浏览器里面执行解析

一、beforeCreate

首先,在APP里面用了自定义的组件之后,相当于new Vue()创建了组件的实例对象
在这里插入图片描述
在这里插入图片描述

然后会立马进入Init Events & Lifecycle,在内存里进行初始化这个组件内部的一些事件和生命周期函数(如果没写生命周期函数也会执行,只不过执行为空)
在这里插入图片描述

当上面一步做完后会立即触发beforeCreate函数,但是此时的props,data,methods都没被创建,无法使用,所以很少用到
在这里插入图片描述

二、created

接下来便是初始化我们的props,data,methods
在这里插入图片描述
然后便是初始化完成,不过DOM元素等并未渲染到页面上,不能操作DOM(也就是说不能通过标签上的id啊这些东西来查询data里的东西或者其它api的东西)
这个created非常重要,通常在这个函数内我们可以发起ajax请求来拿取我们需要看到的一些网页数据
然后把这些ajax数据拿给页面的模板结构去渲染,模板结构要渲染,就只能从data里面取数据,因此我们在methods里面的函数执行了取数据的操作,并把数据往data里面放(此时的props,data,methods都是可用的)
在这里插入图片描述

我们尝试着在methods里面写一个获取书本数量的方法,function会让函数里面的this出现问题,因此要改成箭头函数
在这里插入图片描述在data里面加一个books:[]空数组(空数组默认0本图书),存储所有图书列表数据,在dom里面调用books.length就可以知道有几本图书了
在这里插入图片描述

然后我们打算在created里面写入此函数
在这里插入图片描述
然后就能获取到数据了
在这里插入图片描述

三、编译生成HTML结构

在这里插入图片描述

在这里插入图片描述

No选项将把我们的el节点当作我们的模板进行编译,这整个阶段是vue-template-compiler基于数据,将data里面的每个数据读取出来挨个填到相应的区域的内

四、beforeMount

紧接着开始执行beforeMount,但是是将要渲染,并没有渲染出来,也可以在这里发ajax,所以这个函数并没有啥用
在这里插入图片描述

五、mounted

开始替换el区,渲染DOM结构,因此这个过程结束后就是可以操作DOM了

因此mounted可以最早操作dom了,至此,第一阶段结束
在这里插入图片描述
在这里插入图片描述

六、beforeUpdate

当数据变化后,需要重新渲染
在这里插入图片描述

我们可以先写一个插值,然后当点击按钮时,插值发生了变化
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

此时里面的数据data都是最新的,但是UI结构是旧的,页面还没有来得及重新渲染,所以接下来便是重新渲染了

七、updated

在这里插入图片描述

这上面的一个组件更新的循环阶段的方法,最少发生0次,最多发生无数次;而在创建阶段所有方法只执行1次

八、beforeDestroy

在这里插入图片描述
在这里插入图片描述

我们可以利用v-if来销毁组件,先写一个永远不成立的式子,希望点击此按钮就会触发事件,当v-if等于false时,就销毁此组件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

九、destroyed

组件已经被完全销毁

版权声明
本文为[Hoorus]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_52480906/article/details/126157080

Scroll to Top