vue.js 生命周期

news2024/11/18 15:50:36

在页面首次加载执行顺序有如下:

  1. beforeCreate //在实例初始化之后、创建之前执行
  2. created //实例创建后执行
  3. beforeMounted //在挂载开始之前调用
  4. filters //挂载前加载过滤器
  5. computed //计算属性
  6. directives-bind //只调用一次,在指令第一次绑定到元素时调用
  7. directives-inserted //被绑定元素插入父节点时调用
  8. activated //keek-alive组件被激活时调用,则在keep-alive包裹的嵌套的子组件中触发
  9. mounted //挂载完成后调用

修改页面input时,被自动调用的选项顺序如下:

  1. watch //首先先监听到了改变事件
  2. filters //过滤器没有添加在该input元素上,但是也被调用了
  3. beforeUpdate //数据更新时调用,发生在虚拟dom打补丁前
  4. directived-update //指令所在的组件的vNode更新时调用,但可能发生在其子vNode更新前
  5. directives-componentUpdated//指令所在的组件的vNode及其子组件的vNode全部更新后调用
    6.updated //组件dom已经更新

完整的生命周期的时序如下

  1. beforeCreate:实例初始化。
  2. Created:实例初始化完成。resource $data 已可取得,但 $el 属性还不能使用。
  3. beforeMount:执行元素关在之前。
  4. mounted:元素已挂载, $el 被建立。
  5. beforeUpdate:当资源变化的时候被调用,这个时候 View还不会被描画。
  6. updated:DOM 的更新已经完成,View 被显示在画面上。
  7. activated:如果有设定 keep-alive,這個hook会被调用。
  8. deactivated:停用 keep-alive时被调用。
  9. beforeDestroy:实体还可使用。
  10. destroyed:实例被销毁。所有绑定被解除、事件监听被移除、子实例也被销毁。

在这里插入图片描述

https://www.modb.pro/db/402040

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1065088.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MySQL语句大总结

基础语法数据库约束复杂语法1:聚合查询(所谓聚合计算聚合函数的结果)2:联合查询什么是内连接;什么是外连接?3:子查询(套娃,慎用)4:合并查询 基础语法 建库 c…

如何使用 Hotshot 通过文字生成 GIF 动画

Hotshot 是一个基于人工智能的工具,可用于通过文字生成 GIF 动画。该工具使用最新的图像生成技术来创建逼真的动画,即使是复杂的文字描述也能做到。 hotshot访问地址 使用 Hotshot 生成 GIF 动画 要使用 Hotshot 生成 GIF 动画,您需要首先…

吃鸡高手亲授:玩转绝地求生,分享顶级游戏干货!

绝地求生(PUBG)自上线以来,成为了全球热门游戏。作为吃鸡行家,我将分享一些独家技巧和干货,帮助您提高游戏战斗力,享受顶级游戏作战体验! 首先,让我们谈一谈战斗力升级。想要在吃鸡游…

卷积网络的发展历史-LeNet

简介 LeNet是CNN结构的开山鼻祖,第一次定义了卷积神经网络的结构。 LeNet模型包含了多个卷积层和池化层,以及最后的全连接层用于分类。其中,每个卷积层都包含了一个卷积操作和一个非线性激活函数,用于提取输入图像的特征。池化层…

FreeRTOS入门教程(队列详细使用示例)

文章目录 前言一、队列基本使用二、如何分辨数据源三、传输大块数据总结 前言 上篇文章我们已经讲解了队列的概念和队列相关的API函数,那么本篇文章的话就开始带大家来学习使用队列。 一、队列基本使用 这个例子将会创建三个任务,其中两个任务用来发送…

Netty(四)NIO-优化与源码

Netty优化与源码 1. 优化 1.1 扩展序列化算法 序列化,反序列化主要用于消息正文的转换。 序列化:将java对象转为要传输对象(byte[]或json,最终都是byte[]) 反序列化:将正文还原成java对象。 //java自带的序列化 // 反序列化 b…

互联网Java工程师面试题·Memcached 篇·第二弹

目录 10、memcached 如何实现冗余机制? 11、memcached 如何处理容错的? 12、如何将 memcached 中 item 批量导入导出? 13、如果缓存数据在导出导入之间过期了,您又怎么处理这些数据呢? 14、memcached 是如何做身份…

3. 安装lombok maven镜像设置

安装lombok & maven镜像设置 一、maven镜像设置 Maven:负责进行项目管理、依赖工具管理的 软件。 快捷解决方案: 1.方法一 直接配置系统默认的文件 各个人因为登录的用户名不同,所以目录名不同。 2.方法二 自定义本地仓库的位置 完成之后重新打…

混合优化算法(optimtool.hybrid)

import optimtool as oo from optimtool.base import np, sp, pltpip install optimtool>2.5.0混合优化算法(optimtool.hybrid) import optimtool.hybrid as oh oh.[方法名].[函数名]([目标函数], [参数表], [初始迭代点], [正则化参数], [邻近算子名…

【5G PHY】5G BWP(BandWidth Part)介绍

博主未授权任何人或组织机构转载博主任何原创文章,感谢各位对原创的支持! 博主链接 本人就职于国际知名终端厂商,负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作,目前牵头6G算力网络技术标准研究。 博客…

1.Window10 JDK8安装与配置(更新版)

Window10 JDK8安装与配置(更新版) 1,JDK安装 版本知识 注意:安装目录绝对不能出现中文及特殊符号,不能以数字开头。一定要以管理员身份打开。 具体下载步骤可参考:Window10 JDK8安装与配置详细步骤 安装尽量不要到系统盘&…

如何一步步优化负载均衡策略

发展到一定阶段后,Web 应用程序就会增长到单服务器部署无法承受的地步。这时候企业要么提升可用性,要么提升可扩展性,甚至两者兼而有之。为此,他们会将应用程序部署在多台服务器上,并在服务器之前使用负载均衡器来分配…

C++设计模式-抽象工厂(Abstract Factory)

目录 C设计模式-抽象工厂(Abstract Factory) 一、意图 二、适用性 三、结构 四、参与者 五、代码 C设计模式-抽象工厂(Abstract Factory) 一、意图 提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们…

unity脚本_生命周期函数 c#

帧:fps 即每秒钟跑的游戏帧数 游戏的本质 是一个死循环 每一次循环处理游戏逻辑就会更新一次画面 之所以能看到画面在动 是因为切换画面的速度达到一定时人眼就认为画面时流畅的 一帧就是执行一次循环 人眼舒适放松时可视帧数 24帧/s 游戏卡顿的原因: …

C 语言的标识符,保留标识符,关键字

C99 和 C11 允许使用更长的标识符(identifier),但是编译器只能识别前 63 个字符,对于外部标识符,只允许使用 31 个字符。 实际上,可以使用更长的字符,但是编译器会忽略超出部分的字符。 如果两…

Stack和quque

102. 二叉树的层序遍历 - 力扣(LeetCode) 如图:层序遍历即一层一层遍历,从左到右。 先遍历第一层,把第一层的节点放到队列里面,levesizeq.size(),即代表队列里面有多少个值。 然后现在把队里里…

笔试编程ACM模式JS(V8)、JS(Node)框架、输入输出初始化处理、常用方法、技巧

目录 考试注意事项 先审完题意,再动手 在本地编辑器(有提示) 简单题515min 通过率0%,有额外log 常见输入处理 str-> num arr:line.split( ).map(val>Number(val)) 初始化数组 new Array(length).fill(v…

windows terminal终端美化

1,安装Windows terminal 可以选择window商店安装或者GitHub安装,安装步骤省略。 2.oh my posh 安装 安装步骤可以选择window 商店或者GitHub安装,步骤省略 3.安装字体 nerd font[官网链接] 4.配置 oh my posh ####第一次要输入以下命…

视频号规则改动,不再支持拍单,传统无货源模式已行不通!

视频号小店批量铺货行不通了,大家好我是派大星,这两天视频号发布了一个公告, 核心信息呢就是10月7号,视频号小店,将无法直接查看消费者的详细下单信息,只能通过电子面单的形式,打单发货。每个店…

RDP协议流程详解(二)Basic Settings Exchange 阶段

RDP连接建立过程,在Connection Initiation后,RDP客户端和服务端将进行双方基础配置信息交换,也就是basic settings exchange阶段。在此阶段,将包含两条消息Client MCS Connect Initial PDU和Server MCS Connect Response PDU&…