【vue3】09-vue组件化额外知识补充(上)-生命周期-ref引用

news2024/11/8 14:11:37

组件化-额外知识补充(上)

  • 生命周期
    • 认识生命周期
    • 生命周期函数的演练
  • refs引用

生命周期

认识生命周期

什么是生命周期呢?

  • 生物学上,生物生命周期指得是一个生物体在生命开始到结束周而复始所历经的一系列变化过程;
  • 每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程;
  • 在这个过程中的某一个阶段,我们可能会想要添加一些属于自己的代码逻辑(比如组件创建完后就请求一些服务器数据);
  • 但是我们如何可以知道目前组件正在哪一个过程呢?Vue给我们操供了组件的生命周期函数;

生命周期函数:

  • 生命周期函数是一些钩子函数(回调函数),在某个时间会被Vue源码内部进行回调;
  • 通过对生命周期函数的回调,我们可以知道目前组件正在经历什么阶段;
  • 那么我们就可以在该生命周期中编写属于自己的逻辑代码了;

生命周期的流程图示(官网):

在这里插入图片描述
生命周期流程分析:

beforeCreate
创造组件实例之前。会回调beforeCreate函数

created
beforeCreate回调完成之后, 就会创建组件实例, 组件实例创建完成, 回调created函数;
此钩子的主要应用场景是发送网络请求,事件监听、this.$watch等设置。

beforeMount
created回调完成之后,未挂载到虚拟Dom之前被调用;
此时,Vue实例的DOM元素并未真正被替换挂载,但其组件实例的Vue.$el已经得到了内容渲染。
此钩子的主要应用场景是在DOM元素挂载之前进行一些异步操作,如数据异步处理等。

mounted
Vue实例DOM已经被渲染并挂载到页面的DOM元素上,挂载完成后,回调mounted函数。
此钩子的主要应用场景是完成一些必须在挂载后进行的异步操作,如元素初始化、事件绑定等,也可以在此获取Dom,操作Dom

beforeUpdate
挂载完成后,数据更新后,更改还没有重新渲染组件实例(即更新前的组件实例)之前被调用。
此钩子的主要场景是处理一些数据更新后的异步操作,如获取最新数据等。

updated
根据最新数据生成新的VNode, 重新渲染成新的虚拟DOM, 再根据新的虚拟DOM渲染成真实DOM后,此钩子将被调用。
此钩子的主要应用场景是完成DOM更新之后操作,如操作DOM后重新计算元素大小等。

beforeUnmount
在组件实例销毁之前被调用,即在组件实例的DOM元素被卸载之前,在组件的父组件或Vue实例销毁之前。
此钩子的主要应用场景包括与组件实例相关的清理操作,如删除定时器、取消事件监听等。

unmounted
在组件的DOM元素被卸载之后被调用,此时组件的实例已经被销毁,无法再操作组件实例。
此钩子的主要应用场景包括回收内存和解绑事件监听器等。

生命周期函数的演练

来做一个简单的演练,理解各个生命周期函数的执行顺序和应用场景:

(1)直接在App组件中使用除beforeUnmount和unmounted之外的各个生命函数:

<template>
    <div id="app">
   <h2>{{ message }}-{{ counter }}</h2>
   <button @click="message='hello app'">修改message</button>
   <button @click="counter++">+1</button>
    </div>

    <div>
        <button @click="isShowHome=!isShowHome">显示home</button>
        <Home v-if="isShowHome"></Home>
    </div>

  </template>
  
  <script>

  import Home from "./Home.vue";
  export default {
    components:{
        Home
    },
    data(){
        return{
            message:"ada",
            counter:0,
            isShowHome:true
        }
    },
    // 1.组件被创建之前
    beforeCreate(){
        console.log("beforecreate");
    },

    // 2.组件被创建完成(重点掌握)
    created(){
        console.log("created:组件被创建完成");
        console.log("1.发送网络请求,请求数据");
        console.log("2.监听eventbus事件");
        console.log("3.监听watch数据");
    },
    // 3.组件中的template准备被挂载(了解)
    beforeMount(){
        console.log("beforemount");
    },
    
    // 4.组件template被挂载:虚拟dom-> 真实dom(重点掌握)
    mounted(){
        console.log("mounted");
        console.log("1.获取虚拟Dom");
        console.log("2.使用dom");
    },

    // 5.数据发生了改变
    // 5.1准备更新
    beforeUpdate(){
        console.log("beforeupdate");
    },
    // 5.2更新dom
    updated(){
        console.log("updated");
    },

    // 6.准备卸载vnode->dom元素
    // 6.1卸载之前
    beforeUnmount(){
        console.log("beforeunmount");
    },
    // 6.2dom元素被卸载完成
    unmounted(){
        console.log("unmounted");
    }


  }
  </script>

(2)创建一个名为Home的 Vue 组件,包含 beforeUnmount和unmounted 两个生命周期函数。代码如下:

<template>
   <h2>home</h2>
</template>
  
<script>
export default {
   beforeUnmount() {
      console.log("home的beforeunmount");
   },
   unmounted() {
      console.log("home unmounted");
   }
}
</script>

我们可以看到,在这个演示中,页面中有计数器且组件 Home可以通过一个切换按钮显示和隐藏。


运行这个代码,并打开浏览器控制台,我们可以看到下面的输出:

在这里插入图片描述

点击按钮+1修改计数器数字后,控制台新增输出:

在这里插入图片描述

点击按钮隐藏home组件,控制台新增输出:

在这里插入图片描述

从上面的演示中,可以清晰的感受到各个生命周期函数是什么时候执行的;其中非常重要的 created、mounted 和 unmounted 三个生命周期函数应用场景:

  • 当组件被创建时,created 生命周期函数被调用。在这个函数中,我们可以初始化组件的数据和方法等等。
  • 当组件被挂载到页面中,mounted 生命周期函数被调用。在这个函数中,我们可以进行一些必须在挂载后执行的异步操作,如向后端服务器发送请求获取数据等等。
  • 当组件被销毁,unmounted 生命周期函数被调用。在这个函数中,我们应该立即移除组件中的定时器、事件监听器和其他非 Vue 实例的引用,以避免内存泄漏等问题。

refs引用

某些情况下,我们在组件中想要直接获取到元素对象或者子组件实例:

  • 在Vue开发中我们是不推荐进行原生DOM操作的;
  • 这个时候,我们可以给元素或者组件绑定一个ref的attribute属性;

组件实例有一个$refs属性:

它一个对象Object,持有注册过ref attribute 的所有DOM元素和组件实例

当我们需要在 Vue 组件中操作 DOM 元素时,可以使用 ref(s) 这个特殊的属性来访问元素:

  • ref 属性可以用在普通的 HTML 元素上,也可以用在子组件上;
  • 通过 ref(s),我们可以获取到元素的真实 DOM 节点或者组件实例,从而进行一些操作,比如访问元素的属性、绑定事件、修改样式等等

具体来说, ref(s) 包含两种方式,字符串形式和函数形式:

(1)使用字符串:我们可以在元素上通过 v-model 或其他属性为元素指定一个名称,接着在组件的 $refs 对象中使用该名称访问元素,例如:

<template>
  <div>
    <button ref="myBtn" @click="clickHandler">Click me!</button>
  </div>
</template>
<script>
export default {
  methods: {
    clickHandler () {
      console.log(this.$refs.myBtn.value)
    }
  }
}
</script>

上面的例子中,我们在按钮上使用 ref 属性并将其命名为 myBtn。在该组件的 methods 中,我们可以通过 this.$refs.myBtn 访问到该按钮,从而获得 value 属性并打印到控制台上。

(2)使用函数:除了字符串形式,我们还可以通过一个函数返回值来动态地给 ref 赋值。这种方式可以用来在组件中引用其它组件的实例。例如:

<template>
  <div>
    <custom-widget ref="myWidget"></custom-widget>
  </div>
</template>
<script>
import CustomWidget from './CustomWidget.vue'
export default {
  components: {
    CustomWidget
  },
  mounted () {
    const widgetInstance = this.$refs.myWidget;
    widgetInstance.doSomething();
   // this.$refs.myWidget.doSomething();
  }
}
</script>

在上面的代码中,我们使用 CustomWidget 组件添加 ref 属性。当这个组件渲染完成后,我们可以通过 $refs.myWidget 获取组件的实例并调用 doSomething 方法。

总结:

(1)需要注意的是,使用 $refs 可能需要在组件已经被挂载后才能正常访问到。
(2)另外,$refs 是一个非响应式的属性,也就是说,如果使用 $refs 来访问某个组件实例或 DOM 元素,当它发生变化时是无法触发响应式更新的,这时候,就需要使用其他的数据传递方法。

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

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

相关文章

适应新时代的FTP已经出现?这种产品有何过人之处?

大家都知道&#xff0c;FTP是用于在网络上进行文件传输的一套标准协议&#xff0c;它作为互联网最经典的协议之一&#xff0c;至今已经存在了50年。而随着时代发展&#xff0c;越来越多的用户与企业开始觉得FTP不够满足大家的需求&#xff0c;出现的问题与漏洞越来越多&#xf…

好用工具第4期:全能播放器PotPlayer

好用工具第4期:全能播放器PotPlayer Global Potplayer 是一款 Windows 平台的全能播放器。支持几乎所有的视频格式&#xff0c;音频格式&#xff0c;以及在线播放全世界的电视直播。 其官网是&#xff1a; https://potplayer.daum.net/?langzh_CN 特点 支持强劲引擎加速支持3…

【微服务】SpringCloudAlibaba

一 微服务架构 1.1 微服务 微服务其实是一种架构风格&#xff0c;我们在开发一个应用的时候这个应用应该是由一组小型服务组成&#xff0c;每个小型服务都运行在自己的进程内&#xff1b;小服务之间通过HTTP的方式进行互联互通。 1.2 微服务架构的常见问题 一旦采用微服务系…

【论文阅读】(2013)Exact algorithms for the bin packing problem with fragile objects

文章目录 一、摘要二、介绍三、之前在这个问题上的工作四、易碎物品背包问题的求解4.1 ILP模型4.2 基于KP01的方法4.3 动态规划 五、二元分支方案5.1 分支方案1&#xff08;基于决策变量的分支&#xff09;5.2 分支方案2&#xff08;基于yj和xji的分支&#xff09;5.3 将L2嵌入…

精进嵌入式系统设计

当涉及到嵌入式系统设计时&#xff0c;以下是一些建议和关键点&#xff0c;可以帮助您进行有效的设计&#xff1a; 确定需求&#xff1a;明确系统设计的功能需求和性能指标。了解系统的预期用途、功能要求、资源限制和实时性需求等。 硬件选择&#xff1a;根据需求选择合适的硬…

Visio matlab 图像取消边框

visio 图像取消边框 1.菜单栏→文件→选项→自定义功能区→勾选“开发工具”→确定 2.菜单栏→开发工具→显示ShapeSheet→页→Print Properties→将“PageLeftMargin”、“PageRightMargin”、“PageTopMargin”和“PageBottomMargin”均修改为0 &#xff08;双击单元格来编辑…

报表生成器FastReport .Net用户指南:“Text“对象、文本编辑

FastReport .Net是一款全功能的Windows Forms、ASP.NET和MVC报表分析解决方案&#xff0c;使用FastReport .NET可以创建独立于应用程序的.NET报表&#xff0c;同时FastReport .Net支持中文、英语等14种语言&#xff0c;可以让你的产品保证真正的国际性。 FastReport.NET官方版…

微软MFC程序运行的正确顺序

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天来看一下微软MFC程序运行的正确顺序。这真的只是一个小众话题。但是对理解MFC很重要。 很多人写了一堆MFC程序&#xff0c;却不知道MFC程序是怎么运行顺序的。我们就来看一看这个问题。 我在之前的帖子中…

Java IO模型图解(BIO NIO AIO)

一、冯诺伊曼模型 如图&#xff1a; 图片来源&#xff1a;百度百科 输入设备向计算机输入数据&#xff0c;输出设备接收计算机输出的数据。 所有的计算机程序&#xff0c;也都可以抽象为从输入设备读取输入信息&#xff0c;通过运算器和控制器来执行存储在存储器里的程序&am…

热修复/热更新

热修复/热更新 一.Android热修复二.热修复框架三.类加载器0.BootClassLoader1.PathClassLoader2.DexClassLoader 四.实现思路五.代码1.FixManager2.App3.更加标准的代码 五.制作补丁包1.写段有bug的工具类&#xff0c;并写个点击按钮调用2.运行项目到模拟器上3.修复ToastUtils工…

node_modules插件代码修改,如何快速修改防止npm install安装覆盖代码

一、背景 有些组件不满足业务时咱们只能修改插件的源码&#xff1a; 直接在项目的node_modules下找到插件的源码直接修改&#xff1b; 优点&#xff1a;简单直接、快速见效&#xff1b;缺点&#xff1a;不能持久化&#xff0c;一旦重新npm install安装就失效&#xff1b;不方…

(五)ArcGIS空间数据的转换与处理——数据处理

ArcGIS空间数据的转换与处理——数据处理 目录 ArcGIS空间数据的转换与处理——数据处理 1.数据裁剪1.1矢量数据裁剪1.1.1图解1.1.2用法1.1.3操作步骤 1.2栅格数据裁剪1.2.1矩形裁剪1.2.2利用已有数据裁剪 2.数据拼接2.1矢量数据的拼接2.1.1图解2.1.2用法2.1.3 操作步骤 2.2栅格…

区块链学习三——比特币的数据结构

区块链学习三——比特币的数据结构 文章内容来源于北京大学肖臻老师《区块链技术与应用》公开课 文章目录 区块链学习三——比特币的数据结构 一、哈希指针&#xff08;hash pointers&#xff09;二、区块链三、Merkle tree1.Merkle tree的作用&#xff1a;Merkle Proof2.Proo…

2023最新版本Activiti7系列-任务分配

任务分配 1.固定分配 在指派用户任务的审批人时。我们是直接指派的固定账号。但是为了保证流程设计审批的灵活性。我们需要各种不同的分配方式&#xff0c;所以这节我们就详细的来介绍先在Activiti7中我们可以使用的相关的分配方式. 固定分配就是我们前面介绍的&#xff0c;在绘…

vr沉浸式仿真实训展厅中控系统提高课堂纪律

为解决实训教学过程中“看不到、进不去、成本高、危险大”的问题&#xff0c;VR智能中控系统为职业教育及高等教育老师提供一个数字化、沉浸式、集中管控的实训教学工具。 VR智能中控系统通过对VR教学课堂的实时监控、数据的收集和分析&#xff0c;为气象学院的教学提供更多帮助…

STM32 HAL库 使用 USB HID 配置

STM32 HAL库 HID 配置 STM32 CubeMax 配置修改USB描述符修改HID设备PID VID修改HID报告间隔修改USB报告长度发送和接收发送接收 STM32 CubeMax 配置 我这里使用的是HS接口但使用的是内部FS核。 修改USB描述符 在 usbd_custom_hid_if.c 的 CUSTOM_HID_ReportDesc_HS 或 CUSTO…

python基础----08-----json、pyecharts模块介绍以及折线图、地图、柱状图的绘制

一 python变量和json数据的相互转化 json就是 一种在各个编程语言中流通的数据格式&#xff0c;负责不同编程语言中的数据传递和交互、类似于: 国际通用语言 -英语。 import json if __name__ __main__:# 1. 将python变量转成json(列表->json)# 准备列表&#xff0c;列表内…

css background-position属性

定义 background-position 属性用于设置或获取元素背景图像相对于原点的初始位置。 background-position 基本语法 background-position&#xff1a;背景图片水平位置参数 背景图片垂直位置参数 &#xff1b; background-position 通常使用水平方向以及垂直方向的组合来定义背…

locust的安装和运行的demo

最近开始学习locust&#xff0c;从最初的安装到运行一个简单的demo。 lcoust官网上有介绍安装和使用&#xff1a;https://docs.locust.io/en/stable/installation.html locust 需要的python环境&#xff0c;首先要安装python。 因为本人已经安装了python以及python…

Spring Boot集成WebSocket Demo,简单明了

如果是初次搭建Spring BootWebSocket项目&#xff0c;不需要太复杂&#xff0c;只需要快速上手&#xff0c;那么你搜到的大部分文章可能都不适合你&#xff0c;我的这篇文章以最精简的方式搭建一个可以运行并通信的Spring BootWebSocket的Demo项目&#xff0c;有了根基之后再进…