vue钩子函数和生命周期（vue生命周期常用的四个钩子函数）



通俗说就是Vue实例从创建到销毁的过程，就是生命周期

1. 组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载，无法访问到数据和真实的dom，一般不做操作
2. 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
3. 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
4. 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
5. 当更新完成后，执行updated（据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom）
6. 经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等,组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

1. beforeCreate created[可以获取数据及方法]
2. beforeMount mounted[可以获取到真实的DOM]
3. beforeUpdate updated[数据更新执行]
4. beforeDestroy destroyed[销毁vue实例，不再具有双向数据绑定的特点]

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

1. 创建前/后： 在beforeCreated阶段，vue实例的挂载元素el还没有。在created阶段,vue实例的数据对象data有了,el还没有.
2. 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完，data.message成功渲染。
3. 更新前/后：当data变化时，会触发beforeUpdate和updated方法。
4. 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

component 和keep-alive【component 和keep-alive 都是内置组件，在VUE代码已经内置好的组件】

闭合标签使用组件

1、component : 内置组件，根据is属性来显示对应的组件;is属性的属性值保持和组件名字一致；然后可以显示对应的组件

keep-alive : keep: 保持 alive:活力

1. 当keep-alive 缓存组件才会有的生命周期的钩子函数
2. activated deactivated
3. errorCaptured 当子孙组件出错时，会调用这个钩子函数

本文参考文章：宅男呀的Vue生命周期（11个钩子函数）

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/31168.html