Vue基础系列(三) 生命周期
2019-11-30 本文已影响0人
极客James
阅读时间预估:5分钟
image
什么是生命周期?
生命周期是指一个事物从生到死的过程,软件也一样,每个语言都有其生命周期,从出生到死亡,每个阶段做每个阶段应该做的事情,简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期。
例如面前这位大侠,既然是小白那么就要苦练基本功,千里之行始于足下,万层高楼,平地起,相信在持续的努力中会有所进步,废话不多说直接上干货。
vue生命周期
-
生命周期钩子函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！
-
注意：Vue在执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可
-
注意：钩子函数的名称都是Vue中规定好的！
Vue的生命周期
钩子函数 - beforeCreate()
- 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
- 注意：此时，无法获取 data中的数据、methods中的方法
钩子函数 - created()
- 注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
- vue实例生命周期 - 参考1
- vue实例生命周期 参考2
- 使用场景：发送请求获取数据
钩子函数 - beforeMounted()
- 说明：在挂载开始之前被调用
钩子函数 - mounted()
- 说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作
钩子函数 - beforeUpdated()
- 说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
- 注意：此处获取的数据是更新后的数据，但是获取页面中的DOM元素是更新之前的
钩子函数 - updated()
- 说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
钩子函数 - beforeDestroy()
- 说明：实例销毁之前调用。在这一步，实例仍然完全可用。
- 使用场景：实例销毁之前，执行清理任务，比如：清除定时器等
钩子函数 - destroyed()
- 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
说了这么多来点实在的,大佬一般如何在代码中合理的利用生命周期来构建代码呢?
beforeCreate () {
// 进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。注意：此时还是没有el选项
},
components: {},
data () {
return {
show: false,
msg: "hello word",
mg: "你好世界"
}
},
watch: {
},
methods: {
destory () {
// 调用销毁
this.$destroy();
}
},
created () {
// 在这一阶段发生的事情还是比较多的。首先，会判断对象是否有el选项：如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)
},
beforeMount () {
// 可以看到此时是给vue实例对象添加$el成员，并且替换掉挂在的DOM元素。因为在之前console中打印的结果可以看到beforeMount之前el上还是undefined。
},
mounted () {
this.intervalID = setInterval(() => {
console.log("++++++-------++++");
this.show = !this.show;
}, 1000);
// 在mounted之前p中还是通过{{message}}进行占位的，因为此时还没有挂在到页面上，还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。
},
beforeUpdate () {
// 当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。
},
updated () {
// 在beforeUpdate可以监听到data的变化，但是view层没有被重新渲染，view层的数据没有变化。等到updated的时候，view层才被重新渲染，数据更新。
},
beforeDestory () {
clearInterval(this.intervalID);
// beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用,可以用于清除定时器
},
destory () {
//调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
},
看完这篇不知道面前的这位大侠是否真正的领略到vue生命周期的厉害之处,一定要多用多理解每个生命节点都能干啥,别在错误的节点干错误的事,例如面前这位大侠,此时正是年轻有为之时,一定要脚踏实地,珍惜时间,充实自己,切勿,坐享其成,好高骛远哦!加油,前端甜小白....
如果我的分享对面前的这位大侠有所启发,恳请以程序员最高礼遇点✨ 星评论加分享的方式鼓励我.
关注公众号回复:学习 领取前端最新最全学习资料,也可以进群和大佬一起学习交流
image
猛戳我点星星
