3.vue生命周期钩子函数有哪些？（vue2生命周期钩子函数有哪些）



大家好，又见面了，我是你们的朋友全栈君。

定义：vue的生命周期是指vue实例从初始化创建到实例销毁的过程。期间会有8个钩子函数的调用。

vue的钩子函数图解：

vue的钩子函数使用总结：

1、beforeCreate（创建前）:beforeCreate钩子函数，这个时候，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。无法访问到数据和真实的dom和data中的数据，可以在这里面使用loading

2、created（创建后）:created函数中可以对data对象里面的数据进行使用和更改，不会触发其他的钩子函数，一般可以在这里做初始数据的获取，也可以结束loading; 这里进行dom操作需要使用vue.nextTick()方法

3、beforeMount（挂载前）：beforeMount钩子函数，vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。在这里也可以更改数据，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

4、mounted（挂载后）：mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，data.filter成功渲染，可以在这里操作真实dom等事情…

5、beforeUpdate （更新前）：当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

6、updated（更新后）：当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

7、beforeDestroy（销毁前）：当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

8、destroyed（销毁后）：vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在。这个时候，执行destroyed，在这里做善后工作也可以

vue的钩子函数代码验证：

console打印效果：

demo验证代码：

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/128650.html原文链接：https://javaforall.cn

版权声明：

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

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