vue的生命周期、生命周期函数，又叫钩子函数
生命周期钩子===生命周期函数===生命周期事件
目录
一、Vue生命周期
1、vue实例从创建到销毁的过程
2、vue生命周期有4个阶段
3、父子组件执行顺序
二、钩子函数
1、钩子函数三个阶段
2、vue第一次加载页面会执行哪几个钩子
3、vue中常用的钩子
三、代码实现
1、代码案例
2、执行结果
3、分析总结
1、vue实例从创建到销毁的过程
2、vue生命周期有4个阶段
- 阶段一：创建 （创建vue实例）
- 阶段二：挂载 （data数据渲染到el上）
- 阶段三：更新 （检测data变化并更新el）
- 阶段四: 销毁 （解除data与el的绑定关系）
3、父子组件执行顺序
挂载：父created -> 子created -> 子mounted> 父mounted
更新：父beforeUpdate -> 子beforeUpdated -> 子updated -> 父updated
销毁：父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
1、钩子函数三个阶段
挂载阶段：beforeCreate、created、beforeMounted、mounted
更新阶段：beforeUpdate、updated
销毁阶段：beforeDestroy、destroyed
- 1、beforeCreate ：创建vue实例前。这个钩子就是 data中的数据还没有创建，拿不到数据
- 2、created：vue实例创建完成。这个钩子就是data / methods / computed中的数据已经创建了，可以访问到数据
- 3、beforeMount ： data数据还没有渲染el或者$montd上面。这个钩子就是el或着$montd已经完成了创建，但是还没有进行渲染到页面
- 4、mounted ：完成挂载，data中的数据渲染到页面上。这个钩子就是已经完成了渲染
- 5、beforeUpdate：数据更新前（检测数据发生了变化，但是真是DOM元素页面还没有更新）
- 6、updated：完成数据的更新（把data中修改后的数据渲染到DOM页面上）
- 7、beforeDestroy：vue实例销毁前，这个钩子就是解除了data和el的绑定关系
- 应用场景：一般用来清除定时器/全局事件
- 8、destroyed 完成销毁
2、vue第一次加载页面会执行哪几个钩子
1、创建vue的实例之前：beforeCreate
2、创建vue实例后：created
3、挂载前：beforemount
4、挂载后（初始的渲染，将data中的数据渲染到el上）：mounted
3、vue中常用的钩子
1、created：完成data数据创建（一般用于发送axios的请求）
2、mounted：完成了初始的渲染，data中的数据渲染到el上，但没有加载到页面上
1、代码案例
2、执行结果
3、分析总结
- vue实例创建前：输出的都显示的没有定义
- vue实例创建后：实例创建后，可以操作数据
- DOM挂载前：第三个数据时虚拟DOM
- DOM挂载前：第三个数据时真实的DOM
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/63794.html