文章目录
- 人工智能福利文章
- 什么是Vue生命周期
- Vue生命周期图解
- Vue有8个生命周期钩子函数
- 1. beforeCreate( 创建前,一般不用管 )
- 在这个生命周期可以做什么?
- 1. 可以做页面拦截
- 2.可以做自定义重定向
- 2. created ( 创建后 )
- 3. beforeMount ( 挂载前)
- 4. mounted ( 挂载后,经常使用)
- 在这个生命周期可以做什么?
- 5. beforeUpdate(更新前)
- 6. updated(更新后)
- 7. beforeDestrioy(销毁前,有清除需要时使用)
- 在这个生命周期可以做什么?
- 8. destroyed(销毁后,一般不用管)
- 写在最后
![在这里插入图片描述](https://img-blog.csdnimg.cn/8a7d74a08970425081a49aa9970f5af2.gif#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/636c234176e142c5b8d1737947bfd563.jpeg#pic_center)
人工智能福利文章
- 【分享几个国内免费可用的ChatGPT镜像】
- 【10几个类ChatGPT国内AI大模型】
- 【用《文心一言》1分钟写一篇博客简直yyds】
- 【用讯飞星火大模型1分钟写一个精美的PPT】
什么是Vue生命周期
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。
Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载、销毁等⼀系列过程。
钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。
Vue生命周期图解
下图是Vue官方的生命周期图:
Vue有8个生命周期钩子函数
由上图可见Vue有8个生命周期
1. beforeCreate( 创建前,一般不用管 )
在这个阶段会初始化一些东西,例如:初始化data中的数据、methods中的方法、计算属性computed,以及this的指向等。
它是在实例初始化之后,数据观测和事件配置之前被调用.
此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据。
在这个生命周期可以做什么?
1. 可以做页面拦截
当进一个路由的时候我们可以判断是否有权限进去,是否安全进去,携带参数是否完整,参数是否安全。使用这个钩子好函数的时候就避免了让页面去判断,省掉了创建一个组建Vue实例。
2.可以做自定义重定向
当路由还没有进去时我们判断是否正确进去,若不正确进去可以重定向到指定的页面。
这些都可以在vue路由层进行拦截和重定向。
所以,这个生命周期基本不用管。
// 初始化之前
beforeCreate() {console.log(this.messasge, "初始化数据阶段");
},
2. created ( 创建后 )
实例已经创建完成之后被调用。
在这一步,实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完成了data 数据的初始化。你可以调用methods中的方法,改变data中的数据,获取computed中的计算属性等。通常我们可以在这里对实例进行预处理,也有一些童鞋喜欢在这里发ajax请求。
挂在阶段还没有开始, $el属性目前不可见,不可操作 DOM 节点。
// 初始化完毕
created() {console.log("初始化好了");
},
3. beforeMount ( 挂载前)
挂载开始之前被调用,相关的render函数首次被调用(虚拟DOM),实例已完成以下的配置: 编译模板,把data里面的数据和模板生成html,完成了el和data 初始化。
注意:此时还没有挂载html到页面上,不可操作 DOM 节点。
// 挂载前,对数据的最后一次进行更改,编译完毕,马上将要挂载
beforeMount() {console.log("编译完毕,将要进行挂载");console.log("还没有进行挂载,获取不了");
}
4. mounted ( 挂载后,经常使用)
挂载完成,也就是模板中的HTML渲染到HTML页面中,mounted只会执行一次。
// 编译完毕,将要去实现挂载
mounted() {console.log("能够获取到真实的DOM");
}
在这个生命周期可以做什么?
此时一般可以做一些ajax操作,操作 DOM 节点等。
5. beforeUpdate(更新前)
在数据更新之前被调用,发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程。
beforeUpdate() {// 当data里面的数据发生更新的时候,产生一份虚拟节点他,通过diff算法完成最大化的渲染,console.log("通过diff算法比对准备更新,数据还是之前的");
}
6. updated(更新后)
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用,调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作,然后在大多是情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环,该钩子在服务器端渲染期间不被调用。
updated() {//data里面的数据和页面中此时是最新的了。console.log("更新完的");
}
7. beforeDestrioy(销毁前,有清除需要时使用)
在实例销毁之前调用,实例仍然完全可用。
在这个生命周期,还可以用this来获取实例。
在这个生命周期可以做什么?
一般在这一步做一些重置的操作,比如清除掉组件中的定时器和监听的dom事件等。
beforeDestroy () {//为组件的销毁前做一些准备console.log("销毁前最后的挣扎")// 清除定时器clearInterval(this.timer);this.timer = null;// 移除监听事件window.removeEventListener('scroll', this.handleScroll)
}
8. destroyed(销毁后,一般不用管)
在实例销毁之后调用,调用后,所有的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用。
destroyed() {// 组件已经完全销毁console.log("组件得到销毁");
}
写在最后
✨ 原创不易,希望各位大佬多多支持。
👍 点赞,你的认可是我创作的动力。
⭐️ 收藏,感谢你对本文的喜欢。
✏️ 评论,你的反馈是我进步的财富。