Vue08/Vue 生命周期钩子函数( Vue生命周期11个阶段 )应用场景
Vue生命周期
Vue生命周期介绍
Vue生命周期是指Vue实列对象从创建之初到销毁的过程
一. Vue生命周期11个阶段
创建
beforeCreate //数据初始化前
created //数据初始化之后
挂载
beforeMount // 数据准备渲染
Mounted // 数据渲染完成
运行
beforeUpdata //数据更新前
updated // 数据更新
销毁
beforeDestroy //结束之前执行
destroyed //执行结束
缓存
activated //组件激活时执行
deactivated //组件停止时执行
错误处理
errorCaptured //错误处理机制
二.Vue生命周期11个钩子应用场景
beforeCreate（创建前）
说明: 在实列初始化之后 但又未完成创建之前 执行它时，data和methods中数据都还未初始化
使用场景: 可以在此时加一些loading效果 在created时进行移除
created(创建后)
说明:实列创建完成后被立刻调用 此阶段完成了数据额观测 property 和方法的运算 ，watch/event事件回调 但$el还没有挂载到页面中
使用场景: 一般可以在此时发送一些网络(axios)请求 获取数据
beforeMounted(挂载前)
说明：模块在内存中已经编辑好了 但是并没有渲染到页面中 页面显示的还仅仅是模板字符串 此时DOM为虚拟DOM 还是无法操作的
mounted(挂载后)
说明: el挂载到实列上后调用，DOM加载完成 页面渲染完毕
使用场景: 一般我们的第一个业务逻辑会在这里开始 ，当需要操作DOM的时候执行 可以配合 $nextTick 使用进行单一事件对数据的更新后更新DOM
beforeUpdate(更新前)
说明: 执行它时data中的数据已经被更新了 但是页面中的data还未被替换过来
使用场景: 适合在更新之前访问现有的DOM ， 比如手动移除已添加的事件监听器
updated(更新后)
说明: 数据更新完成 且页面发生改变
使用场景: 当数据更新需要做统一业务处理的时候使用 (我在页面使用better-scroll滑动时使用过，由于页面内容没有被完全加载出来，所以内容的scrollHeight 不够 导致页面滚动不了 所以就在此时使用该钩子函数 在里面进行页面刷新 完成解决问题)
activated(激活时)
说明: 被keep-alive 缓存的组件激活时调用
deactivated(未被激活)
说明: 被keep-alive 缓存的组件激活时调用
beforeDestroy(实例销毁前)
说明: 实列销毁之前调用 实列仍然完全可用
使用场景: 主要解绑一些使用addEventListener监听事件等
destroyed(实例被销毁后)
说明: 实列销毁后调用 该钩子被调用后 对应Vue实列的所有指令都被解绑 所有的事件监听器被移除 所有的子实列也都被销毁
使用场景: 加点提示 toast 之类的东西
Vue08/Vue 生命周期钩子函数( Vue生命周期11个阶段 )应用场景相关推荐
- vue的组件/data的参数/组件传值/插槽/侦听器/生命周期钩子函数
目录 组件结构 组件的命名规则: 组件的data参数 <font color='red'> 组件的父子传值prop(通信) <font color='red'>组件的子--&g ...
- React 生命周期 钩子函数
React15 挂载过程 // 完成了React数据的初始化. props.state constructor() // 组件已经完成初始化数据,但是还未渲染DOM时执行的逻辑 componentWi ...
- 详解Vue八大生命周期钩子函数
摘要:Vue为生命周期中的每个状态都设置了钩子函数(监听函数) .每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用. 本文分享自华为云社区<一文带你弄懂Vue八大生命周期钩子函数&g ...
- 不来看看这些 VUE 的生命周期钩子函数？ | 原力计划
作者 | huangfuyk 责编 | 王晓曼 出品 | CSDN 博客 VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化.可以分为:创建.挂载.更新.销毁四 ...
- 实战 Vue 之生命周期钩子函数执行顺序
实战 Vue 之生命周期钩子函数执行顺序 生命周期钩子函数 父组件与子组件执行顺序 生命周期钩子函数 beforeCreate:实例刚被创建出来,data 数据和 methods 方法还未被初始化,不 ...
- Vue的生命周期钩子函数介绍
感谢内容提供者:金牛区吴迪软件开发工作室 Vue的生命周期钩子函数介绍 vue生命周期共分为四个阶段 一:实例创建 二:DOM渲染 三:数据更新 四:销毁实例 共有八个基本钩子函数 1.beforeC ...
- vue生命周期钩子函数的正确使用方式
对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题 在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ ...
- vue生命周期 钩子函数
vue实例的生命周期:从创建到销毁的整个过程 1.钩子函数 vue框架内置函数,随着组件的生命周期阶段,自动执行 使用钩子函数 可以知道vue生命周期到达了什么阶段 作用:在特定的时间点执行特定的操作 ...
- Vue生命周期钩子函数理解与使用场景
Vue生命周期钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫 ...
最新文章
- 赵雪轩：数据科学助力我的智能化航天梦 | 提升之路系列
- oracle asm盘符变了,使用multipath创建ASM磁盘的奇怪现象
- 力荐联邦学习系统，据说英伟达Clara“上架”新进展！
- vim中自动添加文件的作者、时间信息、版本等
- postgresql c语言,任意语言访问PostgreSQL：C语言接口
- Linux系统编程：获取指定目录下指定文件类型的数量
- Maven核心概念及Eclipse使用Maven
- 编写第一个OpenACC程序
- 【Flink】Flink SQL 报错 ClassCastException: VarCharType cannot be cast to RowType
- mysql 7.x 集群_MySQL cluster 7.X集群部署配置
- 【三维路径规划】基于matlab狼群算法无人机三维路径规划【含Matlab源码 167期】
- 【iOS】lipo otool 动、静态库
- Kafka面试题（附答案）
- 实现企业微信机器人自动发消息
- ART世界探险(6) - 流程控制指令
- java群侠传_梦幻群侠传之天剑如虹(下)
- 简单教你贴－iPhone新一代超薄卡贴
- 申报绿色工厂的条件和标准是什么？
- OSChina 周三乱弹 ——来学学巴叔被女神倒追
- App软件开发的完整在线流程