【Vue】扫盲(五)Vue 的生命周期与钩子函数详解

【Vue】Vue扫盲(一)事件标签、事件修饰符:@click.prevent @click.stop @click.stop.prevent、按键修饰符、及常用指令

【Vue】Vue扫盲(二)指令:v-for 、v-if、v-else-if、v-else、v-show

【Vue】Vue扫盲(三)计算属性和监听器

【Vue】Vue扫盲(四)组件化思想与简单应用

文章目录

    • 一、Vue 生命周期概述
      • 1.Vue 生命周期概述
      • 2.主要的生命周期钩子函数
    • 二、主要的生命周期钩子函数
      • beforeCreate
      • created
      • beforeMount
      • mounted
      • beforeUpdate
      • updated
      • beforeDestroy
      • destroyed
    • 三、执行时机验证:
    • 四、实际应用场景
      • 一、数据获取与初始化
        • 1.从服务器获取数据
        • 2.初始化组件数据
      • 二、DOM 操作相关
        • 1.操作挂载后的 DOM 元素
        • 2.第三方插件或库的初始化
      • 三、响应数据变化与性能优化
        • 1.数据更新时的额外操作
        • 2.处理复杂的计算属性更新
      • 四、资源清理与内存管理
        • 1.定时器与事件监听器的清除
        • 2.取消异步操作
    • 五、总结

在 Vue.js 开发中,理解生命周期和钩子函数是非常重要的。它们允许我们在不同阶段对组件进行特定的操作,从而实现更加灵活和强大的应用。
每个 Vue 实例在被创建时都要经过一系列的初始化过程 : 创建实例, 装载模板, 渲染模
板等等。 Vue 为生命周期中的每个状态都设置了钩子函数(监听函数) 。 每当 Vue 实例处于
不同的生命周期时, 对应的函数就会被触发调用

一、Vue 生命周期概述

Vue 实例在创建和运行过程中会经历一系列的阶段,每个阶段都有相应的钩子函数可以让我们在特定时刻执行自定义的逻辑。Vue 的生命周期大致可以分为以下几个阶段:

1.Vue 生命周期概述

  • 创建阶段:在这个阶段,Vue 实例被初始化,包括数据观测、事件绑定等操作。
  • 挂载阶段:Vue 实例被挂载到 DOM 上,此时可以访问到 DOM 元素。
  • 更新阶段:当数据发生变化时,Vue 会重新渲染组件,触发更新阶段的钩子函数。
  • 销毁阶段:当组件被销毁时,会执行一些清理操作,如解绑事件、移除 DOM 元素等。

2.主要的生命周期钩子函数

主要的生命周期钩子函数

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

真正的执行顺序:在 Vue 实例的生命周期中,钩子函数执行的顺序
创建阶段

  • beforeCreate:首先执行这个钩子函数。此时,Vue 实例刚刚被初始化,数据观测(data observer)和事件机制还未被设置,无法访问到data、computed、methods等实例属性。
  • created:在beforeCreate之后执行。实例已经完成了数据观测、属性和方法的运算,初始化事件,此时可以访问data中的数据,也可以调用methods中的方法,但此时还未开始挂载到
    DOM。

挂载阶段

  • beforeMount:在创建完成之后、挂载开始之前被调用。此时,模板已经编译好了,但还没有挂载到真实的 DOM 上,el属性还未被替换成真实的 DOM 元素。
  • mounted:在beforeMount之后执行。实例已经挂载到真实的 DOM 上,可以通过this.$el访问到挂载后的 DOM 元素。通常在这个钩子函数中进行一些 DOM 操作,如获取 DOM 元素的高度、宽度等。

更新阶段(当数据发生变化时触发)

  • beforeUpdate:数据更新时,在虚拟 DOM 重新渲染和打补丁之前被调用。可以在这个钩子中进一步地更改状态,但不会触发额外的重新渲染循环。
  • updated:在虚拟 DOM 重新渲染和打补丁之后被调用。此时,DOM 已经根据数据的变化更新完毕,可以执行依赖于更新后的 DOM 的操作。

销毁阶段

  • beforeDestroy:在实例销毁之前被调用。此时实例仍然完全可用,可以在这个钩子函数中进行一些清理工作,如清除定时器、解绑自定义事件监听器等。
  • destroyed:在beforeDestroy之后执行。此时,Vue 实例的所有绑定(如指令绑定、事件监听器等)都已经被解除,子实例也被销毁,实例相关的所有东西都被拆除。

在这里插入图片描述

二、主要的生命周期钩子函数

beforeCreate

beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。此时,实例的选项对象还没有被解析,无法访问data、computed、watch等属性。

   new Vue({
     beforeCreate() {
       console.log('beforeCreate');
     },
     data() {
       return {
         message: 'Hello Vue!'
       };
     }
   });

created

created:在实例创建完成后被立即调用。此时,实例已经完成了数据观测、事件配置和方法的初始化,可以访问data、computed、watch等属性,但 DOM 还未被挂载。

   new Vue({
     created() {
       console.log('created');
       console.log(this.message); // 可以访问到 data 中的属性
     },
     data() {
       return {
         message: 'Hello Vue!'
       };
     }
   });

beforeMount

beforeMount:在挂载开始之前被调用。此时,模板已经编译完成,但还未被渲染到 DOM 中。

 new Vue({
     beforeMount() {
       console.log('beforeMount');
     },
     template: '<div>{{ message }}</div>',
     data() {
       return {
         message: 'Hello Vue!'
       };
     }
   });

mounted

mounted:在挂载完成后被调用。此时,实例已经被挂载到 DOM 上,可以访问到 DOM 元素。

 new Vue({
     mounted() {
       console.log('mounted');
       const div = document.querySelector('div');
       console.log(div.textContent); // 输出 'Hello Vue!'
     },
     template: '<div>{{ message }}</div>',
     data() {
       return {
         message: 'Hello Vue!'
       };
     }
   });

beforeUpdate

beforeUpdate:在数据更新时,但在虚拟 DOM 重新渲染和打补丁之前被调用。可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

new Vue({
     data() {
       return {
         count: 0
       };
     },
     beforeUpdate() {
       console.log('beforeUpdate');
     },
     template: '<div>{{ count }}</div>',
     methods: {
       increment() {
         this.count++;
       }
     }
   });

updated

updated:在数据更新之后,虚拟 DOM 重新渲染和打补丁之后被调用。此时,组件的 DOM 已经更新,可以执行依赖于 DOM 的操作。

  new Vue({
     data() {
       return {
         count: 0
       };
     },
     updated() {
       console.log('updated');
     },
     template: '<div>{{ count }}</div>',
     methods: {
       increment() {
         this.count++;
       }
     }
   });

beforeDestroy

beforeDestroy:在实例销毁之前被调用。在这个阶段,实例仍然完全可用,可以执行一些清理操作,如解绑事件、清除定时器等。

 new Vue({
     beforeDestroy() {
       console.log('beforeDestroy');
       // 清除定时器
       clearInterval(this.timer);
     },
     data() {
       return {
         message: 'Hello Vue!'
       };
     },
     created() {
       // 设置定时器
       this.timer = setInterval(() => {
         console.log('Timer is running.');
       }, 1000);
     }
   });

destroyed

destroyed:在实例销毁之后被调用。此时,实例的所有绑定和事件监听器都已被移除,子实例也都被销毁。

 new Vue({
     destroyed() {
       console.log('destroyed');
     },
     data() {
       return {
         message: 'Hello Vue!'
       };
     },
     created() {
       // 设置定时器
       this.timer = setInterval(() => {
         console.log('Timer is running.');
       }, 1000);
     },
     beforeDestroy() {
       clearInterval(this.timer);
     }
   });

三、执行时机验证:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单项绑定 v-bind</title>
</head>
<body>
 
     <div id ="app">
      <span id="num">{{num}}</span>
      <button @click="num++"></button>
      <h3>{{name}},{{num}}点赞</h3>
     </div>

  

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
       let vm = new Vue({
            el:"#app",
            data:{
               name:"张三",
               num:100
            },
            methods: {
                show(){
                    return this.name;
                },
                add(){
                    this.num++;
                }
               
            },
            beforeCreate() {
                console.log("==============beforeCreate===============");
                console.log("数据模型未加载:"+this.name,this.num);
                console.log("html模版已加载:"+document.getElementById("num").innerText);
                console.log("方法未加载:"+this.show());
                
      
            },
            created() {
                console.log("==============created===============");
                console.log("数据模型已加载:"+this.name,this.num);
                console.log("方法已加载:"+this.show());
                console.log("html模版已经加载:"+document.getElementById("num"));
                console.log("html模版未渲染:"+document.getElementById("num").innerText);
            },
            beforeMount() {
                console.log("==============beforeMount===============");
                console.log("html模版未渲染:"+document.getElementById("num").innerText);
            },
            mounted() {
                console.log("==============mounted===============");
                console.log("html模版已渲染:"+document.getElementById("num").innerText);
            },
            beforeUpdate() {
                console.log("==============beforeUpdate===============");
                console.log("数据模型已更新:"+this.name,this.num);
                console.log("html模版未更新:"+document.getElementById("num").innerText);
                
            },
            updated() {
                console.log("==============updated===============");
                console.log("数据模型已更新:"+this.name,this.num);
                console.log("html模版已更新:"+document.getElementById("num").innerText);
            },

        })

    </script>
</body>
</html>

效果1:进入页面的时候 执行情况如下
在这里插入图片描述

效果2:点击更新后, 执行情况如下
在这里插入图片描述

四、实际应用场景

一、数据获取与初始化

1.从服务器获取数据

在created钩子函数中,由于实例已经完成了数据观测、事件配置和方法的初始化,可以发起异步请求来获取服务器端的数据。例如,从 API 获取用户信息并填充到组件的data属性中。

   new Vue({
     created() {
       axios.get('/api/userInfo').then(response => {
         this.user = response.data;
       });
     },
     data() {
       return {
         user: null
       };
     }
   });
2.初始化组件数据

对于一些本地数据的初始化,如设置默认值或者根据初始条件计算某些数据,也可以在created钩子中进行。例如,根据用户权限初始化菜单列表。

   new Vue({
     created() {
       if (this.user.role === 'admin') {
         this.menuList = ['dashboard', 'users', 'settings'];
       } else {
         this.menuList = ['dashboard'];
       }
     },
     data() {
       return {
         user: {role: 'user'},
         menuList: []
       };
     }
   });

二、DOM 操作相关

1.操作挂载后的 DOM 元素

在mounted钩子函数中,因为实例已经挂载到 DOM 上,可以安全地进行 DOM 操作。比如获取某个 DOM 元素的尺寸、添加自定义的 DOM 事件监听器等。

   new Vue({
     mounted() {
       const element = document.querySelector('.my - element');
       console.log(element.offsetWidth);
       element.addEventListener('click', this.handleClick);
     },
     methods: {
       handleClick() {
         console.log('Element clicked!');
       }
     }
   });
2.第三方插件或库的初始化

许多第三方插件需要在 DOM 元素存在后进行初始化。例如,初始化一个自定义的日期选择器插件,需要在mounted钩子中进行操作。

   new Vue({
     mounted() {
       const picker = new DatePicker('#date - picker - element');
     }
   });

三、响应数据变化与性能优化

1.数据更新时的额外操作

在beforeUpdate和updated钩子函数中,可以在数据更新时进行额外的操作。例如,在beforeUpdate中判断数据是否真正发生变化,如果没有实质变化则阻止不必要的 DOM 更新,从而提高性能。

   new Vue({
     data() {
       return {
         value: 0
       };
     },
     beforeUpdate() {
       if (this.oldValue === this.value) {
         // 阻止更新
         return;
       }
       this.oldValue = this.value;
     },
     updated() {
       // 执行依赖于更新后DOM的操作
     }
   });
2.处理复杂的计算属性更新

当计算属性依赖于多个数据并且更新逻辑复杂时,可以在beforeUpdate或updated钩子中进行相关的逻辑处理,确保计算属性的结果正确更新并且不会造成性能问题。

四、资源清理与内存管理

1.定时器与事件监听器的清除

在beforeDestroy钩子函数中,当组件被销毁时,可以清除定时器、解绑事件监听器等,以避免内存泄漏。例如,如果在组件创建时设置了一个定时器,在beforeDestroy中就需要将其清除。

   new Vue({
     data() {
       return {
         timer: null
       };
     },
     created() {
       this.timer = setInterval(() => {
         console.log('Timer running');
       }, 1000);
     },
     beforeDestroy() {
       clearInterval(this.timer);
     }
   });
2.取消异步操作

如果组件中有正在进行的异步操作(如未完成的网络请求),在beforeDestroy中可以尝试取消这些操作,以防止不必要的资源消耗或者数据不一致性。例如,使用axios的取消请求功能。

   new Vue({
     data() {
       return {
         cancelToken: null,
         data: null
       };
     },
     created() {
       const source = axios.CancelToken.source();
       this.cancelToken = source.token;
       axios.get('/api/data', {cancelToken: source.token}).then(response => {
         this.data = response.data;
       });
     },
     beforeDestroy() {
       if (this.cancelToken) {
         axios.cancel(this.cancelToken);
       }
     }
   });

五、总结

Vue 的生命周期和钩子函数为我们提供了强大的工具,使我们能够在不同阶段对组件进行精细的控制。通过合理地使用这些钩子函数,我们可以实现更加高效、灵活和可维护的 Vue 应用程序。在实际开发中,我们应该根据具体的需求选择合适的钩子函数来执行相应的操作,以提高开发效率和应用性能。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

多种方式确定Linux是CentOS还是Ubuntu

目录 前言正文 前言 对应的基本知识比较少&#xff0c;以下只是记录总结 由于目前使用的是centos&#xff0c;后续找到linux会对应补充 正文 要确定Linux系统是CentOS还是Ubuntu&#xff0c;可以通过以下几种方式进行分析 一、查看发行版信息文件&#xff1a; CentOS&…

Prism导航入门学习笔记

首先创建一个空的Prism项目 在View文件夹中创建一个UserControl的A界面&#xff0c;再在ViewModel中创建一个AViewModel的类 在主页面中创建Button按钮&#xff0c;使用Command属性&#xff0c;指向导航命令的方法&#xff0c;CommandParameter指向导航的页面 <Grid><…

【Java】画心形图形

开始看到的是这个爱心图形&#xff0c;挺好看的&#xff08;感谢这些前端巨佬&#xff09;&#xff1a; HTML流光爱心_爱心代码html-CSDN博客 本来想着自己看下这个源代码能不能实现&#xff0c;看了下源代码其实非常复杂。 在看代码的过程中发现&#xff0c;源代码里边给出…

多线程(二):创建线程关键属性终止线程

目录 1、run & start 2、Thread类常见的属性和方法 2.1 构造方法 2.2 属性 3、后台进程 & 前台进程 4、后台线程的判断和设定——isDaemon & setDaemon 5、线程是否存活——isAlive 6、终止一个线程 6.1 lambda变量捕获 6.2 currentThread & isInterr…

使用three.js 实现蜡烛效果

使用three.js 实现蜡烛效果 import * as THREE from "three" import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"var scene new THREE.Scene(); var camera new THREE.PerspectiveCamera(60, window.innerWidth / window.in…

【opengl学习】opengl的compute shader

目的 opengl虽然老&#xff0c;但是算上opengl es&#xff0c;应该是应用最广泛的显卡api。用compute shader做计算&#xff0c;可以一定程度上摆脱N卡的限制&#xff0c;也摆脱windows和linux&#xff0c;mac等平台的限制。 计算着色器应该没有完全榨干硬件的性能&#xff0c…

CUDA - 如何让线程和内存对应

前提&#xff1a; 本文的目的就是设置的程序中&#xff0c;每个线程可以负责一个单独的计算任务。帮助学习和理解线程是如何组织的。 本文处理一个二维数据的加法。 数据在内存中的存储 以线性、行为主的方式存储。 例如&#xff0c;一个16*8的一维数组&#xff0c;在内存…

站在用户视角审视:以太彩光与PON之争

作者:科技作家-郑凯 园区,是企业数字化转型的“中心战场”。 云计算、大数据、人工智能等数智化技术在园区里“战火交织”;高清视频、协同办公,智慧安防等大量创新应用产生的海量数据在园区内“纵横驰骋”;加上大量的IOT和智能化设备涌入“战场”,让园区网络面对着难以抵御的…

查看PyTorch的GPU使用情况的工具

文章目录 torch.cuda APIPyTorch SnapshotPyTorch ProfilerNVIDIA Nsight Systemstorchinfo torch.cuda API torch.cuda.memory_stats&#xff1a;返回给定设备的 CUDA 内存分配器统计信息字典。该函数的返回值是一个统计字典&#xff0c;每个字典都是一个非负整数。torch.cud…

antDesign Form.List下的Form.Item如何通过setFieldsValue设置值

翻了一下antDesign官网只看见了Form可以使用setFieldsValue设置值&#xff0c;却没找到Form.List使用setFieldsValue设置值。 于是研究了一下&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 我的解决方案是&#xff1a; 先设置为空数组, 再设置成…

利用编程思维做题之反转链表

牛客网题目 1. 理解问题 给到我们的是一个单链表的头节点 pHead&#xff0c;要求反转后&#xff0c;返回新链表的头节点。 首先在心里设想能够快速理解的例子&#xff0c;如给你123序列&#xff0c;要你反转此序列如何回答&#xff1f;将最后一个数字3作为头&#xff0c;然后修…

学习threejs,THREE.MeshBasicMaterial网格材质、THREE.MeshLambertMaterial漫反射材质

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.MeshBasicMaterial网…

MATLAB代码解析:利用DCGAN实现图像数据的生成

摘要 经典代码&#xff1a;利用DCGAN生成花朵 MATLAB官方其实给出了DCGAN生成花朵的示范代码&#xff0c;原文地址&#xff1a;训练生成对抗网络 (GAN) - MATLAB & Simulink - MathWorks 中国 先看看训练效果 训练1周期 训练11周期 训练56个周期 脚本文件 为了能让各位…

centos7 Oracle 11g rac 静默安装(NFS配置共享存储)

1.环境信息准备 注意&#xff1a; 在配置网络时&#xff0c;Oracle RAC的每个节点必须具有至少两个以上的网卡&#xff0c;一张网卡对外提供网络服务&#xff0c;另一张网卡用于各个节点间的通信和心跳检测等。在配置RAC集群的网卡时&#xff0c;如果节点1的公共接口是eth0&…

下一代安全:融合网络和物理策略以实现最佳保护

在当今快速发展的技术环境中&#xff0c;网络和物理安全融合变得比以往任何时候都更加重要。随着物联网 (IoT) 和工业物联网 (IIoT) 的兴起&#xff0c;组织在保护数字和物理资产方面面临着独特的挑战。 本文探讨了安全融合的概念、说明其重要性的实际事件以及整合网络和物理安…

本地装了个pytorch cuda

安装命令选择 pip install torch1.13.1cu116 torchvision0.14.1cu116 torchaudio0.13.1 --extra-index-url https://download.pytorch.org/whl/cu116 torch版本查看 python import torch print(torch.__version__) 查看pytorch能否使用cuda import torch# 检查CUDA是否可用…

鸿蒙NEXT开发-动画(基于最新api12稳定版)

注意&#xff1a;博主有个鸿蒙专栏&#xff0c;里面从上到下有关于鸿蒙next的教学文档&#xff0c;大家感兴趣可以学习下 如果大家觉得博主文章写的好的话&#xff0c;可以点下关注&#xff0c;博主会一直更新鸿蒙next相关知识 专栏地址: https://blog.csdn.net/qq_56760790/…

241014-绿联UGOSPro-通过虚拟机访问主机的用户目录及文件夹

如图所示&#xff0c;两种方式&#xff1b; 方式1: 通过Files中的Other Locations 添加主机ip&#xff0c;随后输入主机的用户名及密码即可系统及文件加载可能需要一段时间&#xff0c;有点卡&#xff0c;加载完应该就可以点击访问了 方式2: 通过命令行直接ssh/sftp userna…

【C++网络编程】(一)Linux平台下TCP客户/服务端程序

文章目录 Linux平台下TCP客户/服务端程序服务端客户端相关头文件介绍 Linux平台下TCP客户/服务端程序 图片来源&#xff1a;https://subingwen.cn/linux/socket/ 下面实现一个Linux平台下TCP客户/服务端程序&#xff1a;客户端向服务器发送&#xff1a;“你好&#xff0c;服务…

网络资源模板--Android Studio 实现简易新闻App

目录 一、项目演示 二、项目测试环境 三、项目详情 四、完整的项目源码 一、项目演示 网络资源模板--基于Android studio 实现的简易新闻App 二、项目测试环境 三、项目详情 登录页 用户输入&#xff1a; 提供账号和密码输入框&#xff0c;用户可以输入登录信息。支持“记…