vue生命周期的理解?

news2024/10/5 18:32:47

目录标题

  • 一、什么是生命周期?
  • 二、生命周期的流程图:

一、什么是生命周期?

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译版、挂载Dom ->染、更新 ->渲染、卸载 等一系列过程,称这是Vue的生命周期。

  • beforeCreate (创建前): 数据观测和初始化事件还未开始,此时 data 的响应式追踪、event/watcher
    都还没有被设置,也就是说不能访问到data、 computed、watch、methods上的方法和数据。
  • created (创建后) :实例创建完成,实例上配置的options 包括 data、 computed、 watch、 methods
    等都配置完成,但是此时渲染得节点还未挂载到 DOM,所以不能访问到 $el 属性。
  • beforeMount (挂载前):在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配3.置:编译模板,把data里面的数据和模板生成html。此时还没有挂载html到页面上。
  • mounted (挂载后): 在el被新创建的 vm.sel
    替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html染到html页面中。此过程中进行ajax交互。
  • beforeUpdate (更新前): 响应式数据更新时调用,此时虽然响应式数据更新了,但是对应的真实 DOM 还5没有被渲染。
  • updated(更新后):在由于数据更改导致的虚拟DOM重新染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
  • beforeDestroy (销毁前): 实例销毁之前调用。这一步,实例仍然完全可用, this 仍能获取到实例。
  • destroyed(销毁后): 实例销毁后调用,调用后,Vue
    实例指示的所有东西都会解绑定,所有的事件监听8.器会被移除,所有的了实例也会被销毁。该钩了在服务端渲染期间不被调用。

在这里插入图片描述

二、生命周期的流程图:

在这里插入图片描述

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

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

相关文章

简单清晰了解B树和B+树

一.学习背景 在MySQL的学习中,我们了解到了索引的知识,而关于MySQL索引背后的数据结构,我们在这里进行学习. 首先,我们要了解到的是,MySQL的索引用到的数据结构为B树. 使用B树是因为,在数据量大的时候,内存不够用,大部分数据只能存放在磁盘上,只有需要…

【Linux命令行与Shell脚本编程】第七章 Linux文件权限

Linux命令行与Shell脚本编程 第七章 Linux文件权限 文章目录 Linux命令行与Shell脚本编程七,Linux文件权限7.1,Linux的安全性7.1.1,用户信息 /etc/passwd文件7.1.2,用户密码 /etc/shadow文件7.1.3,useradd 添加新用户7.1.4,userdel 删除用户7.1.5, 修改用户1,usermod2,passwd…

Hystrix Dashboard图形化监控

👉🏻 SpringCloud 入门实战系列不迷路 👈🏻: SpringCloud 入门实战(一)什么是SpringCloud?SpringCloud 入门实战(二)-SpringCloud项目搭建SpringCloud 入门实…

【云计算•云原生】1.什么是云计算?它为什么这么火?

文章目录 1.云计算基础什么是云计算云计算的分类开源软件、自由软件、免费软件 2.云计算机制云基础设施机制云管理机制云安全机制基本云架构 3.虚拟化技术服务器虚拟化服务器虚拟化技术CPU虚拟化内存虚拟化设备和I/O虚拟化存储虚拟化网络虚拟化桌面虚拟化 KVM 4.网络与存储基础…

90后,第一批接棒白酒的“年轻人”

【潮汐商业评论/原创】 又到了每月的公司团建,“团建必喝酒”似乎已经成为了大家的共识。 但在酒水的选择上,有红的、啤的、洋的,还有低度果酒,唯独不见听谁说聚会喝白的。当Jason询问为什么没有白酒时,得到了几乎一…

C语言函数大全-- o 开头的函数

C语言函数大全 本篇介绍C语言函数大全-- o 开头的函数 1. obstack_init,obstack_free,obstack_alloc,obstack_blank,obstack_grow 1.1 函数说明 函数声明函数功能void obstack_init(struct obstack *obstack_ptr);它是 POSIX …

Python采集某网站小sp内容, m3u8内容下载

前言 嗨喽~大家好呀,这里是魔王呐 ❤ ~! 环境使用: Python 3.8 Pycharm 模块使用: import requests >>> pip install requests import re 正则表达式 解析数据 import json 本次案例所用知识点: python基础语法: 字典创建/取值 print输出函数使用…

【人工智能概论】 RNN、LSTM、GRU简单入门与应用举例、代码耗时计算

【人工智能概论】 RNN、LSTM、GRU简单入门与应用举例、代码耗时计算 文章目录 【人工智能概论】 RNN、LSTM、GRU简单入门与应用举例、代码耗时计算一. RNN简介1.1 概念简介1.2 方法使用简介 二. 编码层embedding2.1 embedding的参数2.2 embedding的理解 三. Linear层与CrossEnt…

全景图像算法简述

全景图像拼接是一种将多个图像合成为一个大型全景图像的技术。这种技术广泛应用于虚拟现实、游戏开发、文化遗产保护等领域。本文将介绍三种主流的全景图像拼接算法,并对它们进行综合比较。 一、基于特征点匹配的拼接算法 特征点匹配是全景图像拼接中最常用的一种算…

深入讲解ARMv8 异常处理简介

内核稳定性问题复杂多样,最常见的莫过于“kernel panic”,意为“内核恐慌,不知所措”。这种情况下系统自然无法正常运转,只能自我结束生命,留下死亡信息。诸如: “Unable to handle kernel XXX at virtual …

直播系统开发中哪些技术架构是必不可少的

在当今数字化时代,直播已成为一种极其受欢迎的娱乐和营销方式。由于直播应用的复杂性,架构师在直播系统的开发和设计中扮演着至关重要的角色。本文将介绍直播系统开发中技术架构师所必不可少的技术和工具。 什么是直播系统? 直播系统是一种通…

uni-app入门到实战

🍿*★,*:.☆( ̄▽ ̄)/$:*.★* 🍿 🍟欢迎来到前端初见的博文,本文主要讲解uni-app入门到实战🍟 👨‍🔧 个人主页 : 前端初见 🥞喜欢的朋友可以关注一下&#xff…

【Linux】浏览器写代码!部署code-server远程vscode网页

部署code-server远程vscode网页,在浏览器上写代码! 参考文档 https://developer.aliyun.com/article/876967#slide-7 本文首发于 慕雪的寒舍 1.什么是code-server? 注意,这不是在linux系统上安装vscode软件(和windo…

虹科分享 | 如何主动保护个人信息 | 网络安全评级

网上报税和支付越来越流行,针对毫无防备的纳税人的税务欺诈也越来越频繁。以下是一些需要避免的常见网上税务骗局: 网络钓鱼诈骗 骗子利用电子邮件、短信或电话伪装成相关机构或报税软件提供商,诱骗人们提供他们的个人信息,或点击…

走进梦龙冰淇淋的生产线 揭晓“灯塔工厂”背后的秘密

作为一家积极履行社会责任的公司,联合利华和路雪在今年3月携手京东“青绿计划”,推出了包含梦龙、可爱多、千层雪、和路雪等多款可持续组合装产品,这一助力实现双碳目标的举措也引发了消费者的关注。其实,自联合利华太仓食品生产基…

我们都被 ChatGPT 给骗了?

引言: 用过 ChatGPT 的人都知道,当你与 chatgpt 对话的时候,它是“逐字输出”的,就像真的有个人在跟你打字一样。其实,这种技术并没有那么神奇,这种技术叫做“实时文本生成”或“逐字输出”技术&#xff0…

分布式事务Seata-AT模式

承接上文分布式事务-二阶段提交 Seata是开源的分布式事务解决方案,提供高性能和简单易用的分布式事务服务,包含AT、TCC、 SAGA、XA四种事务模式,为用户打造一站式的分布式解决方案。 Seata提供的4种事务模式都是由2PC(二阶段提交…

【C++的内联函数】

文章目录 一、什么是内联函数二、内联函数的优缺点三、使用内联函数的注意事项 一、什么是内联函数 用关键字inline修饰的函数叫做内联函数。 C编译器编译时会自动在被调用的地方展开。 二、内联函数的优缺点 内联函数的优点: 没有函数栈帧创建,提升…

干货分享 | 如何在业余时间学习数据分析?

从社会学背景的数分小白到独揽公司市场部的数据分析,和大家简单分享我的数据分析升级打怪之路。 简单说就是两点【培养数据分析思维】【提升数据分析技能】 思维的培养主要靠书籍和课程 以下是一些对我影响较大的书籍,按照【入门、进阶、高阶】简单做了…

torch.nn.Multiheadattention介绍

初始化参数: class torch.nn.MultiheadAttention(embed_dim, num_heads, dropout0.0, biasTrue, add_bias_kvFalse, add_zero_attnFalse, kdimNone, vdimNone, batch_firstFalse, deviceNone, dtypeNone) 允许模型共同关注来自不同表示子空间的信息。 多头注意力…