通过之前一系列内容的推进来到生命周期的内容了,那么对于生命周期图示这块内容原文档内容有这么一段话: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 来测试:
通过销毁的方式,可以看到
以上就是生命周期的内容,简单的了解知道生命周期的一个内容,然后在后续的不断使用和学习就能够慢慢的知道生命周期!这也为了后续的内容讲解铺垫!感谢大家的支持!