每日一VUE——组件的生命周期

文章目录

  • VUE组件的生命周期
    • 生命周期钩子函数
    • 实例创建
    • Teleport

VUE组件的生命周期

  • 组件生命周期

组件从创建到挂载、更新、到销毁的一系列过程被称为组件的生命周期。

  • 生命周期函数

在组件的各个生命周期节点执行的函数,为生命周期钩子函数。

生命周期钩子函数

组件的生命周期可以分为4个阶段:创建、挂载、更新、销毁。

所以生命周期钩子函数也分为4组:

  1. 创建阶段

    1. 对组件事件和生命周期钩子函数进行初始化,之后立即调用beforeCreate函数
    2. 对组件选项的配置进行初始化,之后立即调用created函数
  2. 挂载阶段

    1. 基于数据和模板,在内存生成虚拟DOM结构,之后立即调用beforeMount函数

    2. 用虚拟DOM结构替换挂载点内的元素,之后立即调用mounted函数

  3. 更新阶段

    1. 根据数据变化,重新更新虚拟DOM结构,之后立即执行beforeUpdate函数

    2. 将虚拟DOM结构更新部分,重新渲染到页面中,之后立即调用update函数

  4. 销毁阶段

    1. 组件实例在被销毁之前,VUE会自动调用beforeUnmount函数,此时组件实例依然保持全部功能

    2. 在组件实例在被销毁之后,VUE会立即调用Unmounted函数

在这里插入图片描述

实例创建

  1. 对组件事件和生命周期钩子函数进行初始化,之后立即调用beforeCreate函数
  2. 对组件选项的配置进行初始化,之后立即调用created函数

Teleport

Teleport内置组件的作用是将组件模板结构的部分内容“传送”给该组件渲染区域之外的地方,一般在创建模态框、弹出窗口或其他覆盖在页面上的元素时使用。

若有错误与不足请指出,关注DPT一起进步吧!!!

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何在Rust中操作JSON

❝ 越努力,越幸运 ❞ 大家好,我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。 前言 我们之前在Rust 赋能前端-开发一款属于你的前端脚手架中有过在Rust项目中如何操作JSON。 由于文章篇幅的原因,我们就没详细介绍…

Web 题记

[极客大挑战 2019]LoveSQL 看到这种就肯定先想到万能密码,试试,得到了用户名和密码 总结了一些万能密码: or 11 oror admin admin-- admin or 44-- admin or 11-- admin888 "or "a""a admin or 22# a having 11# a havin…

基于ArcGIS、InVEST与RUSLE水土流失模拟及分析

我国是世界上水土流失最为严重的国家之一,水土流失面广量大。据第一次全国水利普查成果,我国现有水土流失面积294.91万平方公里。严重的水土流失,是我国生态恶化的集中反映,威胁国家生态安全、饮水安全、防洪安全和粮食安全&#…

Stable Diffusion之文生图模型训练

1、数据准备 提前准备好一组相关的照片。 在线的图片处理网站 BIRME - Bulk Image Resizing Made Easy 2.0 (Online & Free) 将图片转成统一大小,支持批量处理,效率高 2、生成提示词 进入stable diffusion webui页面 旧版直接使用 train/proproc…

(四)C++自制植物大战僵尸游戏启动流程

植物大战僵尸游戏开发教程专栏地址http://t.csdnimg.cn/ErelL 一、启动方式 鼠标左键单机VS2022上方工具栏中绿色三角按钮(本地Windows调试器)进行项目启动。第一次启动项目需要编译项目中所有代码文件,编译生成需要一定的时间。不同性能的电…

AliyunCTF 2024 - BadApple

文章目录 前言环境搭建漏洞分析漏洞利用参考 前言 本文首发于看雪论坛 https://bbs.kanxue.com/thread-281291.htm 依稀记得那晚被阿里CTF支配的恐惧,今年的阿里CTF笔者就做了一道签到PWN题,当时也是下定决心要学习 jsc pwn 然后复现这道 BadApple 题目…

小米温度计接入HA后,手机米家app里温度计就看不到温度数值了

环境: 小米温度计 HA OS Core 2023.12.1 Supervisor 2024.04.0 Operating System 11.1 问题描述: 小米温度计接入HA后,手机米家app里和HA里面温度计就看不到温度数值了 解决方案: 1.前往米家APP,解绑温度计和本地…

粮油包装生产线效率与品质双提升攻略

随着生活节奏的加快和消费者对食品安全、便捷性要求的提高,粮油包装生产线的效率与产品质量成为了决定企业竞争力的重要因素。那么,如何在保证产品质量的同时,提升粮油包装生产线的生产效率呢?星派将为您揭示答案。 一、引入智能化设备&…

简单了解C++常见编程问题解决方案

这篇文章主要介绍了C常见编程问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 电脑配置:window10, 64位操作系统,基于x64的处理器,Microsoft Visual Studio Comm…

网络编程套接字(二)之UDP服务器简单实现

目录 一、服务端UdpServer 1、udp_server.hpp 1、服务器的初始化 2、服务器的运行 2、udp_server.cc 二、客户端UdpClient udp_client.cc 三、完整代码 一、服务端UdpServer 1、udp_server.hpp 首先,我们在该文件中,将服务器封装成一个类&#…

刷代码随想录有感(32):逆波兰表达式求值

题干&#xff1a; 代码&#xff1a; class Solution { public:stack<long long> st;int evalRPN(vector<string>& tokens) {for(int i 0; i < tokens.size(); i){if(tokens[i] "" || tokens[i] "-" || tokens[i] "*" |…

C++面向对象程序设计-北京大学-郭炜【课程笔记(六)】

C面向对象程序设计-北京大学-郭炜【课程笔记&#xff08;六&#xff09;】 1、可变长数组类的实现2、流插入运算符和流提取运算符的重载2.1、对形如cout << 5 ; 单个"<<"进行重载2.2、对形如cout << 5 << “this” ;连续多个"<<&…