vue3从精通到入门12:vue3的生命周期和组件

生命周期:

生命周期钩子主要包括:

  1. beforeCreate:组件实例被创建之前调用。在这个阶段,组件的 props 和 data 还未被初始化。
  2. created:组件实例创建完成后调用。在这个阶段,组件的 props 和 data 已经被初始化,但 DOM 还未挂载。
  3. beforeMount:组件的模板编译和虚拟 DOM 已经创建,但尚未挂载到真实 DOM 上。
  4. mounted:组件已经挂载到真实 DOM 上,可以访问和操作 DOM 元素。
  5. beforeUpdate:组件的响应式数据发生变化,但尚未重新渲染和更新 DOM。
  6. updated:组件已经重新渲染和更新 DOM。
  7. beforeUnmount:组件实例被销毁之前调用。在这个阶段,组件仍然完全可用。
  8. unmounted:组件实例已经被销毁,组件的所有功能都已失效。

初始化阶段

setup

这是 vue 3 引入的新生命周期钩子,在 beforeCreate 和 created 钩子之前调用。setup 函数接收两个参数:props 和 context(包含 attrsslotsemit 等)。在 setup 中,你可以使用 ref 和 reactive 来创建响应式状态,并且可以直接访问组件的 props

beforeCreate

在组件实例创建之前调用。此时,组件的 props 和 data 还未被观察和初始化。在 setup 钩子之后调用。

created

组件实例创建完成后调用。在这个阶段,组件的 props 和 data 已经被观察和初始化,但 DOM 还未挂载。可以在这里执行一些不需要 DOM 的初始化操作。

挂载阶段

beforeMount

在组件的模板编译和虚拟 DOM 已经创建,但尚未挂载到真实 DOM 上之前调用。

mounted

组件已经挂载到真实 DOM 上,可以访问和操作 DOM 元素。通常在这里执行一些初始的 DOM 操作或第三方库的初始化。

更新阶段

beforeUpdate

组件的响应式数据发生变化,但尚未重新渲染和更新 DOM 之前调用。可以在这里访问组件更新前的状态。

updated

组件已经重新渲染和更新 DOM 之后调用。当需要基于新的 DOM 状态执行操作时,可以在这里进行。

卸载阶段

beforeUnmount

组件实例被销毁之前调用。在这个阶段,组件仍然完全可用,但即将被卸载。可以在这里执行一些清理操作,如取消计时器、移除事件监听器等。

unmounted

组件实例已经被销毁,组件的所有功能都已失效。在这个阶段,无法再访问组件实例或任何其状态。

错误处理

errorCaptured

当组件或其后代组件发生错误时调用。这个钩子可以用于错误处理和报告。

注意事项

  • 在 Vue 3 中,beforeDestroy 和 destroyed 钩子已被重命名为 beforeUnmount 和 unmounted
  • setup 钩子在组件的 beforeCreate 和 created 生命周期钩子之间执行,因此它提供了一个更早的时机来设置响应式状态和执行其他初始化逻辑。
  • 由于 setup 函数在 beforeCreate 和 created 之前调用,因此你不能在 setup 中访问 this,因为组件实例尚未创建。
<template>  <div>  <p>{{ message }}</p>  <button @click="changeMessage">Change Message</button>  </div>  
</template>  <script setup>  
import { ref, onMounted, onBeforeUnmount } from 'vue';  const message = ref('Hello, Vue 3!');  
let count = ref(0);  function changeMessage() {  message.value = `Message changed ${++count.value} times!`;  
}  onMounted(() => {  console.log('Component mounted!');  // 执行一些需要在组件挂载后执行的代码  
});  onBeforeUnmount(() => {  console.log('Component about to be unmounted!');  // 执行一些需要在组件卸载前执行的清理操作  
});  
</script>

组件:

创建组件

<template>  <div>  <p>Count: {{ count }}</p>  <button @click="increment">Increment</button>  </div>  
</template>  <script setup lang="ts">  
import { ref } from 'vue';  // 定义一个响应式引用  
const count = ref(0);  // 定义一个方法  
function increment() {  count.value++;  
}  // 可以直接将变量和方法暴露给模板  
// 它们会在模板中自动变得可用  
</script>  <style scoped>  
/* 组件样式 */  
</style>

响应式数据和方法

  • name 和 age 是使用 ref 创建的响应式引用,它们分别存储用户的姓名和年龄。
  • incrementAge 是一个方法,用于增加用户的年龄。

计算属性

  • title 是一个计算属性,它基于 name 的值动态生成标题。

Props

  • UserProps 是一个 TypeScript 接口,定义了组件接受的 props 的类型。
  • defineProps 用于声明组件的 props,并根据 UserProps 接口进行类型检查。
  • 在 onMounted 生命周期钩子中,我们根据传入的 props 初始化 name 和 age 的值。

模板

  • 在模板中,我们直接使用了在 <script setup> 中定义的 titlenameage 和 incrementAge。由于 <script setup> 的语法,这些变量和方法在模板中自动可用。

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

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

相关文章

Linux空洞文件

起因 今天在学习RandomAccessFile这个类时&#xff0c;看到里面有一个方法 public void seek(long pos) throws IOException {if (pos < 0) {throw new IOException("Negative seek offset");} else {seek0(pos);}}这个方法没有对文件的长度的校验&#xff0c;如…

springcloud==openfeign+springboot仿照openfeign自定义注解和使用

我的目的是参照原本openfeign的注解&#xff0c;但是我想实现每个外部服务的URL可以自己指定生成的规则。 自定义EnableMyFeignClients 自定义MyImportBeanDefinitionRegistrar&#xff0c;更改获取URL的逻辑。这个应该是个可行的方式&#xff0c;但是RIBBON的视线方式应该会…

LangChain入门:11.Pydantic(JSON)解析器实战

摘要 在数字化营销的浪潮中&#xff0c;自动化内容生成成为了提升效率和用户参与度的利器。本文将详细介绍如何利用LangChain的自然语言处理能力和Pydantic的数据验证特性&#xff0c;构建一个自动化的花店文案生成器。通过这个工具&#xff0c;您可以快速为各种花卉生成吸引人…

Gateway是什么?(SpringCloudAlibaba组件)

1、网关介绍 **网关(Gateway)又称网间连接器、协议转换器。网关在传输层上以实现网络互连&#xff0c;是最复杂的网络互连设备&#xff0c;仅用于两个高层协议不同的网络互连。**网关的结构也和路由器类似&#xff0c;不同的是互连层。网关既可以用于广域网互连&#xff0c;也可…

截稿倒计时 CCF-B COCOON’24论文延期至4月8日提交

会议之眼 快讯 第30届COCOON 2024 (International Computing and Combinatorics Conference)即国际计算与组合学会议将于 2024 年 8月23日-25日在中国上海举行&#xff01;COCOON是一个专注于计算机科学理论领域的国际性学术会议&#xff01;COCOON会议自1995年起举办&#xf…

Promise-以往的异步编程模式

要理解这个 double 函数在调度异步操作后为什么会立即退出&#xff0c;我们可以一步一步拆解它的执行流程。 首先&#xff0c;看一下 double 函数的定义&#xff1a; function double(value) {setTimeout(() > setTimeout(console.log, 0, value * 2), 1000); }当你调用 d…

JDK下载安装配置

一.JDK安装配置。 1.安装注意路径,其他直接下一步。 2.配置。 下接第4步. 代码复制: JAVA_HOME D:\Program Files\Java\jdk1.8.0_91 D:\Program Files\Java\jdk1.8.0_91\bin 3.验证(CMD)。 java javac java -version 二.下载 1.下载JDK1.5-1.9(所有版本)下载: https://www.…

docker环境中宿主机防火墙添加ssh无法生效的问题分析

背景 在部署了docker容器的环境中&#xff0c;要在防火墙开通22端口&#xff0c;即ssh服务&#xff0c;以便在终端可以正常登陆。使用firewall-cmd在docker区域添加了22端口&#xff0c;但是没有起作用。后再public区域添加22端口才起作用。为什么docker区域不起作用&#xff…

使用vuepress搭建个人的博客(一):基础构建

前言 vuepress是一个构建静态资源网站的库 地址:VuePress 一般来说,这个框架非常适合构建个人技术博客,你只需要把自己写好的markdown文档准备好,完成对应的配置就可以了 搭建 初始化和引入 创建文件夹press-blog npm初始化 npm init 引入包 npm install -D vuepress…

蓝桥杯_数学模板

1.试除法判定质数 #include <iostream> using namespace std;bool is_zs(int x) {if(x<2) return false;for(int i2;i<x/i;i)if(x%i0)return false;return true; }int main() {int n; cin>>n;while(n--){int x; cin>>x;if(is_zs(x)) cout<<&quo…

windows下安装iteliij Idea2023.3

首先从官网下载 下载 IntelliJ IDEA – 领先的 Java 和 Kotlin IDE 双击打开进行安装&#xff1a; 安装完成后&#xff0c;需要对Idea进行稍微处理下。使用我分享给大家的文件&#xff0c;操作以下步骤&#xff1a; 注意&#xff1a;不能打开IDEA软件。 进入到scripts中点击un…

C语言存储⽅式有哪⼏种?分别是什么?

一、问题 什么叫存储⽅式&#xff1f;存储⽅式有⼏种&#xff1f;分别是什么&#xff1f; 二、解答 因变量存储⽅式不同⽽产⽣的特性称作变量的⽣存期。⽣存期表示了变量存在的时间。⽣存期加上前⾯讲过的作⽤域是从时间和空间这两个不同的⻆度来描述变量的特性&#xff0c; 这…

[技术闲聊]我对电路设计的理解(一)

讲点题外话&#xff0c;也算回忆&#xff0c;捋一捋过往的生活。 大学毕业后&#xff0c;进入公司实习&#xff0c;从产线开始&#xff0c;为期一个月&#xff0c;当时课室负责人说&#xff0c;进入一家公司&#xff0c;首先了解公司的产品&#xff0c;产线是最直接最合适最近距…

独孤思维:高客单价项目,必须来一个

01 上次和水龙聊完以后&#xff0c;完成了图书电商项目小报童的梳理。 而且还让我规划后端低转高产品的设计。 目前独孤&#xff0c;准备以图书电商项目私教作为切入点&#xff0c;捆绑自己的合伙人。 设计高客单价项目。 所以&#xff0c;独孤4月的副业规划目标&#xff…

AI绘图:Stable Diffusion WEB UI 详细操作介绍:基础篇

接上一篇《AI绘图体验&#xff1a;Stable Diffusion本地化部署详细步骤》本地部署完了SD后&#xff0c;大家肯定想知道怎么用&#xff0c;接下来补一篇Stable Diffusion WEB UI 详细操作&#xff0c;如果大家还没有完成SD的部署&#xff0c;请参考上一篇文章进行本地化的部署。…

2.2.1.2-网格交易(python网格交易附实战交易记录)

跳转到根目录&#xff1a;知行合一&#xff1a;投资篇 已完成&#xff1a; 1、投资&技术   1.1.1 投资-编程基础-numpy   1.1.2 投资-编程基础-pandas   1.2 金融数据处理   1.3 金融数据可视化 2、投资方法论   2.1.1 预期年化收益率   2.1.2 一个关于yaxb的…

C++之STL的algorithm(4)之拷贝相关算法(copy、replace、swap)整理

C之STL的algorithm&#xff08;4&#xff09;之拷贝相关算法&#xff08;copy、replace、swap&#xff09;整理 注&#xff1a;整理一些突然学到的C知识&#xff0c;随时mark一下 例如&#xff1a;忘记的关键字用法&#xff0c;新关键字&#xff0c;新数据结构 C 的查找算法整理…

多线程--深入探究多线程的重点,难点以及常考点线程安全问题

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

Redis高可用主从复制与哨兵模式

前言 在生产环境中&#xff0c;除了采用持久化方式实现 Redis 的高可用性&#xff0c;还可以采用主从复制、哨兵模式和 Cluster 集群的方法确保数据的持久性和可靠性。 目录 一、主从复制 1. 概述 2. 作用 3. 主从复制流程 4. 部署 4.1 安装 redis 4.2 编辑 master 节…

物联网实战--入门篇之(七)嵌入式-MQTT

目录 一、MQTT简介 二、MQTT使用方法 三、MQTT驱动设计 四、代码解析 五、使用过程 六、总结 一、MQTT简介 MQTT因为其轻量、高效和稳定的特点&#xff0c;特别适合作为物联网系统的数据传输协议&#xff0c;已经成为物联网事实上的通信标准了。关于协议的具体内容看看这…