第三十四篇 生命周期 - 易理解
创始人
2024-02-03 12:25:08
0

         通过之前一系列内容的推进来到生命周期的内容了,那么对于生命周期图示这块内容原文档内容有这么一段话:You don’t need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference.;什么意思呢?它是不需要你立马弄明白生命周期图示里面的所有内容,而是通过不断的一个学习和使用后才会有参考的价值!下面可以简单的来看一下图示(附中文版本图示);

         生命周期就有这么八个,分为四组,分别是 beforeCreate(创建之前)、created(创建完成),beforeMount(挂载之前)、mounted(挂载完成),beforeUpdate(更新之前)、updated(更新完成),beforeDestory(销毁之前)、Destoryed(销毁完成);在生命周期当中并不是每一个都很常用,也就那么几个,但是依然需要去了解关注事件在什么时候触发的,为什么会在这个地方触发而不是在其他地方,也即是它触发的时机;下面就简单的来了解一下为后续的内容做基础;

生命周期

        可以知道的是在控制会打印出前四个的内容;后面四个都尚未被触发;

         从控制台打印的内容来看以及结合图示,在 beforeCreate 创建之前去打印 data 中定义的author,输出结果是一个undefined,可以看到在 beforeCreate 创建之前 Vue实例刚在内存当中创建出来,并未初始化好 data 和 methods ;到 created 创建完成,此时实例已经在内存当中创建完成了,此时的 data 和methods 已经初始化完成,能够打印出data中的author,但还没有开始编译模板;到befortMount 挂载之前,此时已经完成了模板的编译,但还没有挂载到页面上去;当到mounted 挂载完成之时,DOM的挂载也就完成了,可以访问DOM,能够挂载到页面指定的容器当中,可以做一些事件监听,发ajax请求,设置定时器等之类的操作;

        前面我们是通过点击来进行一个axios请求,现在可以直接在mounted()当中去发起axios的请求,这里可以将之前的fetch和axios请求的东西在mounted中去进行测试一下,那么这里就以axios的这篇内容进行,附上地址: 第二十篇 axios使用

测试:与data和methods平级编写以下代码(这里的数据源自之前axios中模拟的数据)

mounted(){axios.get("fetch.json").then(res=>{console.log(res);})}

 测试效果:

        在挂载完成时进行数据请求渲染在页面;ps: 进入网站时就会自动的去请求数据渲染在页面上,不需要像之前一样通过点击按钮发起请求获取数据在渲染在页面当中;


        那么后面的两组先来第一组继续操作,也就是 beforeUpdate 和 updated ;为了能够更加直观下面来单独编写:

        beforeupdate 更新之前,这时data当中的数据时最新的,但是在页面当中显示的数据依然时未更新之前的数据(旧数据),因为此时并未开始进行对DOM节点进行渲染;

        updated 更新完成,此时data当中的数据已经完成了对DOM节点的一个渲染,data 和页面当中的数据都是最新的。

思路:通过点击按钮更改data中author的数据,然后在beforeUpdate更新之前 和 在updated更新完成 这两个生命周期进行对data数据和DOM节点进行打印;

测试代码编写:

{{author}}

测试效果:

 点击 "更新data数据" 后

        跟预期的一样在更新之前的data数据是最新的而DOM节点的数据是未更新之前的旧数据;更新完成的data数据和DOM节点数据都是最新的数据。


        最后一组 beforeDestory 销毁之前 和 Destoryed 销毁完成,还记得第一篇内容讲到v-if和v-show的区别吗?在讲 v-if 的时候说 v-if 是通过销毁和创建来进行显示和隐藏的吗?下面我们通过一个组件,使用 v-if 来测试:

        通过销毁的方式,可以看到组件已经没有了,已然被 "抹杀"了;那么在beforeDestory 销毁之前进行实例的调用仍然是可以用的,一旦销毁完成之后则 destoryed 所有的东西都会被解绑,所有监听器也会被移除掉,所有的子实例也会被销毁!

        以上就是生命周期的内容,简单的了解知道生命周期的一个内容,然后在后续的不断使用和学习就能够慢慢的知道生命周期!这也为了后续的内容讲解铺垫!感谢大家的支持!

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
一帆风顺二龙腾飞三阳开泰祝福语... 本篇文章极速百科给大家谈谈一帆风顺二龙腾飞三阳开泰祝福语,以及一帆风顺二龙腾飞三阳开泰祝福语结婚对应...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...