文章目录
✍创作者：全栈弄潮儿
🏡 个人主页： 全栈弄潮儿的个人主页
🏙️ 个人社区，欢迎你的加入：全栈弄潮儿的个人社区
📙 专栏地址：vue2从入门到精通
人工智能福利文章
什么是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("组件得到销毁");
}
脑筋急转弯小程序抢先体验
✍创作不易，求关注😄，点赞👍，收藏⭐️
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
