【vue2】vue生命周期的理解

news2024/11/24 19:10:24

1d43f75f092a4050a8ce31e2d85f6868.gif

🥳博       主：初映CY的前说(前端领域)

🌞个人信条：想要变成得到，中间还有做到！

🤘本文核心：vue生命周期的介绍、vue生命周期钩子函数详解，vue生命周期的执行顺序

目录

一、生命周期介绍

二、生命周期的构成

1. 生命周期的四个阶段 :

2.八大钩子作用：

1.beforeCreate()：

2.created()

3.beforeMont()

4.monted()

5.beforeUpdata()

6.updated()

7.beforeDestroy()

8.destroyed()

三、执行顺序

一、生命周期介绍

概念：

即一个组件从创建到销毁的一个完整的过程

二、生命周期的构成

钩子概念： vue从创建到销毁过程中，会执行的一些回调函数

1. 生命周期的四个阶段 :

  •  初始化阶段:  beforeCreate、 created
  •  挂载阶段 : beforeMount、mounted
  •  更新阶段 : beforeUpdate、updated
  •  销毁阶段:  beforeDestroy、destroyed
执行顺序钩子函数执行时机
1beforeCreate(){}

vue实例创建了，但是el和data还没有创建 （准备创建data）

底层（初始化vue实例，初始化钩子函数，初始化一些事件和侦听器配置项）

2created() {}

data数据创建了，但是el挂载点还没有创建 (准备创建el)

底层：初始化data中的数据和methods中的方法

3beforeMount() {}

el挂载点创建了，但是data数据还没有渲染（准备渲染中）

底层：创建el挂载点，并且生成虚拟DOM

4mounted() {}

data数据 第一次 渲染完毕 (完成初始渲染)

底层：将虚拟dom渲染成真实DOM

5beforeUpdate() {}检测到data数据变化，但是还没有开始重新渲染 (data变了，准备重新渲染中) 会执行多次
6updated() {}变化后的data数据 ，完成渲染到页面 （完成重新渲染，会重复执行
7beforeDestroy() {}

vue实例销毁即将销毁(解除data与el的关联),之后修改data，页面不会被渲染

底层 ： 解除 事件绑定、侦听器、组件

8destroyed() {}

vue实例已经销毁

2.八大钩子作用：

[前置准备]先创建一个空的vue文件，写入我们需要的素材

<template>
  <div>
    <button @click=" name='李四' ">点我改名字</button>
    <button @click="$destroy()">点我销毁</button>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "张三",
      age: 20
    };
  }
};
</script>

<style>
</style>

上述文页面浏览效果如下：

1.beforeCreate()：

  • vue实例创建了，但是el和data还没有创建 （准备创建data）
  • 底层（初始化vue实例，初始化钩子函数，初始化一些事件和侦听器配置项）
/* 生命周期钩子 */
// 1. beforeCreate() :  创建了vue实例，但是还没有创建data  
beforeCreate() {
    console.log(1);
    console.log(this);
    console.log(this.name);
  }

写入beforeCreate页面效果查看：

我们是生成了初始的vue实例，但是我们存放在data中的数据没有取到

2.created()

  • 创建初始了data,但是还没有挂载
  • 经典应用 ： 页面一加载, ajax请求数据渲染页面。一般写在这个钩子里面
  // 2.created() : 创建了data,但是还没有挂载
  /* 常用: 最早可以获取data的钩子， 一般在这个钩子发送ajax */
  created() {
    console.log(2);
    console.log(this);
    console.log(this.name);
    console.log(this.$el);
  }

写入created页面效果查看：

此时我们存放在data中的数据被找到了 ，但是我们的挂载点没有被找到

3.beforeMont()

  • 创建挂载点，但是还没有把data挂载到el
// 3.beforeMount() : 创建挂载点，但是还没有把data挂载到el
  beforeMount() {
    console.log(3);
    console.log(this);
    // html环境,这个钩子$el可以获取挂载点。  脚手架环境, 这个钩子$el获取的是undefined
    console.log(this.$el);
    const p = document.querySelector("p");
    console.log(p); //null 没有渲染,所以无法获取dom
  }

 写入beforeMont页面效果查看：

这一步是生成创建我们的挂载点 

4.monted()

  • 完成初始渲染。 把data数据渲染到挂载点el
  • 经典应用 ： 一般常用于操作dom(页面一家在需要操作DOM在这个钩子上)
  mounted() {
    console.log(4);
    console.log(this);
    console.log(this.$el);
    const p = document.querySelector("p");
    console.log(p); // p标签 完成渲染
  }

  写入monted页面效果查看：

我们的挂载点创建成功，讲我们data中的数据存放进去并渲染成功啦！

经历了上述的四个阶段的操作现在我们完成了组件data中的被数据获取到页面渲染的整个流程，接下来的钩子是用于修改data数据与销毁我们的vue实例

5.beforeUpdata()

  •  检测到data数据发生变化,但是还没有更新el
  • 检测data数据变化， 修改虚拟DOM
  • 当有data数据改变 – 重复这个循环( beforeUpdata()与updated() )

 写入beforeUpdata页面效果查看：

 第一步：先在我们的vue中打一个debuddgr断点，防止我们走到updataed的位置

  beforeUpdate() {
    console.log(5);
    console.log(this);// 获取的是变化后的数据, 但是页面还是显示之前的数据
    debugger
  }

第二步：我们现在在vuetools中修改data中的数据，当修改数据后面不变化！当我确定的时候会依旧变成张三。但是我们的内存中会显示出我们修改过的内容

 可以看到我们的vue实例对象中的name被我们成功的修改了，但是大家看右上角的张三，并没有被我们修成。

【再次验证】这是我们直接修改data中的数据，当我们点击 “点我改名字”这个按钮的时候也会出现

之后我们卡在这里了，当我们点击箭头的时候，我们的vue就更新了 

6.updated()

  • 更新之后的data,完成渲染
  • 完成data渲染（将虚拟DOM渲染成真实DOM）
  // 6.updated(): 更新之后的data,完成渲染
  updated() {
    console.log(6);
    console.log(this);
  }

 写入updated页面效果查看：

显而易见当我们修改之后我们的数据马上就渲染到页面上了。实现了彻底更新的操作

7.beforeDestroy()

  •  正在销毁(接触data与el绑定、移除事件监听、移除侦听器)
      触发销毁钩子的两个条件 
      (1)对组件使用v-if
      (2)调用组件的 this.$destroy() 

 写入beforeDestroy页面效果查看：

我们的vue实例正在被销毁

8.destroyed()

  • 完成销毁
    //8.destroyed(): 完成销毁
    destroyed() {
    console.log(8);
    console.log(this);
  }

   写入destroy页面效果查看：

至此我们的vue实例对象从出生创建到销毁喽

上述操作的源代码见下：

App.vue

<template>
  <div>
    <button @click="name = '李四'">点我改名字</button>
    <button @click="$destroy()">点我销毁</button>
    <p>{{ name }}</p>
    <p>{{ age }}</p>


  </div>
</template>
<script>
export default {
  data() {
    return {
      name: '张三',
      age: 20,
    }
  },

  /* 生命周期钩子 */
  // 1. beforeCreate() :  创建了vue实例，但是还没有创建data
  beforeCreate() {
    console.log(1)
    console.log(this)
    console.log(this.name)
  },
  // 2.created() : 创建了data,但是还没有挂载
  /* 常用: 最早可以获取data的钩子， 一般在这个钩子发送ajax */
  created() {
    console.log(2)
    console.log(this)
    console.log(this.name)
    console.log(this.$el)
  },
  // 3.beforeMount() : 创建挂载点，但是还没有把data挂载到el
  beforeMount() {
    console.log(3)
    console.log(this)
    // html环境,这个钩子$el可以获取挂载点。  脚手架环境, 这个钩子$el获取的是undefined
    console.log(this.$el)
    const p = document.querySelector('p')
    console.log(p) //null 没有渲染,所以无法获取dom')
  },
  // 4.mounted() : 完成初始渲染。 把data数据渲染到挂载点el
  /* 常用: 最早可以操作DOM的钩子 */
  mounted() {
    console.log(4)
    console.log(this)
    console.log(this.$el)
    const p = document.querySelector('p')
    console.log(p) // p标签 完成渲染
  },
  // 5.beforeUpdate() : 检测到data数据发生变化,但是还没有更新el
  beforeUpdate() {
    console.log(5)
    console.log(this) // 获取的是变化后的数据, 但是页面还是显示之前的数据
    // eslint-disable-next-line no-debugger
    debugger
  },
  // 6.updated(): 更新之后的data,完成渲染
  updated() {
    console.log(6)
    console.log(this)
  },
  // 7.beforeDestroy(): 正在销毁(接触data与el绑定、移除事件监听、移除侦听器)
  /*触发销毁钩子的两个条件 
  (1)对组件使用v-if
  (2)调用组件的 this.$destroy() 
  */
  beforeDestroy() {
    console.log(7)
    console.log(this)
    // eslint-disable-next-line no-debugger
  },
  //8.destroyed(): 完成销毁
  destroyed() {
    console.log(8)
    console.log(this)
  },
}
</script>

<style>
</style>

三、执行顺序

即按照我们介绍钩子函数的顺序依次往下执行

App.vue

<template>
  <div>
    <!-- 导入子组件 -->
    <son></son>
  </div>
</template>
<script>

import son from '@/components/son.vue'
export default {
  components: { son },


  /* 生命周期钩子 */
  // 1. beforeCreate() :  创建了vue实例，但是还没有创建data
  beforeCreate() {
    console.log('父的beforeCreate')
  },
  // 2.created() : 创建了data,但是还没有挂载
  /* 常用: 最早可以获取data的钩子， 一般在这个钩子发送ajax */
  created() {
    console.log('父的Created')
  },
  // 3.beforeMount() : 创建挂载点，但是还没有把data挂载到el
  beforeMount() {
    console.log('父的beforeMount')
  },
  // 4.mounted() : 完成初始渲染。 把data数据渲染到挂载点el
  /* 常用: 最早可以操作DOM的钩子 */
  mounted() {
    console.log('父的Mounted')
  },
}
</script>

<style>
</style>

 son.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
  </div>
</template>

<script>
export default {

  beforeCreate() {
    console.log('子的beforeCreate')
  },
  // 2.created() : 创建了data,但是还没有挂载
  /* 常用: 最早可以获取data的钩子， 一般在这个钩子发送ajax */
  created() {
    console.log('子的Created')
  },
  // 3.beforeMount() : 创建挂载点，但是还没有把data挂载到el
  beforeMount() {
    // html环境,这个钩子$el可以获取挂载点。  脚手架环境, 这个钩子$el获取的是undefined
    console.log('子的beforeMount')
  },
  // 4.mounted() : 完成初始渲染。 把data数据渲染到挂载点el
  /* 常用: 最早可以操作DOM的钩子 */
  mounted() {
    console.log('子的Mounted')
  },

}
</script>

<style>

</style>

 我们跑一下看下执行效果：

 发现是我们父元素先执行到beforeMont,随后等子渲染完成(执行子的mounted)最后讲父的mounted给执行，完成我们最终的渲染。虽然是有包含关系，但是执行流程是不变的。

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

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

相关文章

使用管控平台管理redis集群

使用管控平台管理redis集群

1 添加redis集群 在数据库资源中添加redis集群&#xff0c;配置参数并将URL中cluster调整为true。 2 验证配置资源是否正常 3 操作redis数据库中的数据 可以通过使用图形化界面或者命令窗口进行Redis数据库的CRUD 3.1 图形化界面操作 操作Redis字符串列表 3.1.1 新增 右…
阅读更多...
Apache Iceberg 背后的设计

Apache Iceberg 背后的设计

原文地址: 阿帕奇冰山&#xff1a;幕后的建筑外观 |德雷米奥 (dremio.com)绝对的精品文章!!!机器翻译和自我调整组成了这篇文章&#xff0c;供大家学习。介绍数据湖的构建希望是实现数据民主化&#xff0c;以允许越来越多的人员、工具和应用程序使用越来越多的数据。实现这一目…
阅读更多...
十五天学会Autodesk Inventor，看完这一系列就够了(八)，图框自定义

十五天学会Autodesk Inventor，看完这一系列就够了(八)，图框自定义

所周知&#xff0c;Autocad是一款用于二维绘图、详细绘制、设计文档和基本三维设计&#xff0c;现已经成为国际上广为流行的绘图工具。Autodesk Inventor软件也是美国AutoDesk公司推出的三维可视化实体模拟软件。因为很多人都熟悉Autocad&#xff0c;所以再学习Inventor&#x…
阅读更多...
【数据库数据恢复】华为云mysql数据库数据被delete的数据恢复案例

【数据库数据恢复】华为云mysql数据库数据被delete的数据恢复案例

数据库数据恢复环境&#xff1a; 华为云ECS&#xff0c;linux操作系统&#xff1b; mysql数据库&#xff0c;实例内数据表默认存储引擎为innodb。 数据库故障&#xff1a; 在执行数据库版本更新测试时&#xff0c;用户误将本应在测试库测试的sql脚本执行在生产库中&#xff0c…
阅读更多...
拉伯证券|芯片半导体迎来“行业底部出清”，大资金进场迹象明显

拉伯证券|芯片半导体迎来“行业底部出清”，大资金进场迹象明显

近期关于小芯片的利好不断&#xff0c;英特尔近期就发布了根据小芯片技能的处理器&#xff0c;而近期长电科技也在小芯片范畴获得突破。据长电科技在互动平台表明&#xff0c;公司现已完成4nm工艺制程手机芯片的封装&#xff0c;最大封装体面积约为1500平方毫米的体系级封装。长…
阅读更多...
人工智能所需高等数学知识大全（收藏版）

人工智能所需高等数学知识大全（收藏版）

来源&#xff1a;投稿 作者&#xff1a;愤怒的可乐 编辑&#xff1a;学姐 不懂数学是学不好人工智能的&#xff0c;本系列文章就汇总了人工智能所需的数学知识。本文是高等数学篇。 另有线代篇和概率论篇 函数与极限 函数 yf(x) ,x是函数f的自变量&#xff0c;y是因变量 函…
阅读更多...
数据结构（4）线段树、延迟标记、扫描线

数据结构（4）线段树、延迟标记、扫描线

活动 - AcWing 参考-《算法竞赛进阶指南》 一、延迟标记&#xff08;懒标记&#xff09; 在线段树的区间查询命令中&#xff0c;每当遇到被查询区间[l,r]完全覆盖节点时&#xff0c;可以直接把节点上的答案作为备选答案返回。我们已经证明&#xff0c;这样操作的复杂度为O(4…
阅读更多...
01-React（脚手架+MVC/MVVM+JSX）

01-React（脚手架+MVC/MVVM+JSX）

使用 create-react-app 构建React工程化项目 安装 create-react-app $ npm i create-react-app -g 「mac需要加sudo」 基于脚手架创建项目「项目名称需要符合npm包规范」 $ create-react-app xxx 目录结构&#xff1a; |- node_modules 包含安装的模块 |- public 页面模板…
阅读更多...
79.循环神经网络的从零开始实现

79.循环神经网络的从零开始实现

从头开始基于循环神经网络实现字符级语言模型。 这样的模型将在H.G.Wells的时光机器数据集上训练。 和之前一样&#xff0c; 我们先读取数据集。 %matplotlib inline import math import torch from torch import nn from torch.nn import functional as F from d2l import to…
阅读更多...
Rockchip开发系列 - 9.watchdog看门狗

Rockchip开发系列 - 9.watchdog看门狗

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅！ 你的喜欢就是我写作的动力！ 目录 dts中的watchdog节点watchdog驱动文件TRM watchdog：WDT框图功能描述计数器中断系统复位复位脉冲长度操作流程图寄存器描述寄存器设置…
阅读更多...
Nessus Host Discovery

Nessus Host Discovery

系列文章 Nessus介绍与安装 Nessus Host Discovery 1.启动nessus cd nessus sh qd_nessus.sh2.进入nessus网站 https://192.168.3.47:8834/3.点击【New Scan】 4.选择【Host Discovery】 5.输入name【主机发现】&#xff0c;Description【主机发现】&#xff0c;Targets【…
阅读更多...
Android 蓝牙开发——服务启动流程（二）

Android 蓝牙开发——服务启动流程（二）

首先我们要知道&#xff0c;主要系统服务都是在 SystemServer 启动的&#xff0c;蓝牙也是如此&#xff1a; 1、SystemServer 源码路径&#xff1a;/frameworks/base/services/java/com/android/server/SystemServer.java private void startOtherServices(NonNull TimingsT…
阅读更多...
labelme（2）json文件转类别灰度图

labelme（2）json文件转类别灰度图

首先感谢大佬&#xff1a;https://blog.csdn.net/tzwsg/article/details/114653071一、上代码&#xff0c;json2gray.py&#xff1a;#!/usr/bin/python # -*- coding: UTF-8 -*- # !H:\Anaconda3\envs\new_labelme\python.exe import argparse import json import os import os…
阅读更多...
go语言中变量和常量的注意点

go语言中变量和常量的注意点

1、类型转换&#xff1a;大类型可以转换成小类型但是精度丢失&#xff1b;小类型不能转换成大类型。例如&#xff1a; package mainimport "fmt"//golang中使用" var "关键字来定义变量 //定义变量的语法&#xff1a;1、var var_name1[,var_name2,...] va…
阅读更多...
day16|654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树

day16|654.最大二叉树、617.合并二叉树、700.二叉搜索树中的搜索、98.验证二叉搜索树

654.最大二叉树 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最大值。递归地在最大值 左边 的 子数组前缀上 构建左子树。递归地在最大值 右边 的 子数组后缀上 构建右子树。 返回 nums 构…
阅读更多...
深度学习入门基础CNN系列——填充（padding）与步幅（stride）

深度学习入门基础CNN系列——填充（padding）与步幅（stride）

填充&#xff08;padding&#xff09; 在上图中&#xff0c;输入图片尺寸为333\times333&#xff0c;输出图片尺寸为222\times222&#xff0c;经过一次卷积之后&#xff0c;图片尺寸为222\times222&#xff0c;经过一次卷积之后&#xff0c;图片尺寸变小。卷积输出特征图的尺寸…
阅读更多...
el-table表头添加勾选框

el-table表头添加勾选框

el-table表头添加勾选框嘚吧嘚实现嘚吧嘚 table的行勾选是比较常规的操作&#xff0c;但是有的时候就有各种奇葩的需求蹦出来。&#x1f62d; 比如最近有一个需求&#xff0c;不仅需要勾选行&#xff0c;还需要勾选列&#xff0c;其实我心中有了一万头可爱的小羊驼&#xff0c…
阅读更多...
NISP三级证书含金量如何

NISP三级证书含金量如何

国家信息安全水平测试&#xff08;NationalInformationSecurityTestProgram&#xff0c;通称NISP&#xff09;&#xff0c;是通过中国信息安全测评中心执行塑造我国网络空间安全优秀人才的一个项目。 为培养大量出色的实践型网络安全人才&#xff0c;中国信息安全测评中心上线…
阅读更多...
SpringCloud Alibaba微服务 -- Seata的原理和使用

SpringCloud Alibaba微服务 -- Seata的原理和使用

文章目录一、认识Seata1.1 Seata 是什么?1.2 了解AT、TCC、SAGA事务模式?AT 模式前提整体机制如何实现写隔离如何实现读隔离TCC 模式Saga 模式Saga 模式适用场景Saga 模式优势Saga 模式缺点二、Seata安装2.1 下载2.2 创建所需数据表2.2.1 创建 分支表、全局表、锁表2.2.2 创建…
阅读更多...
Qt OpenGL（10）光照模型基础

Qt OpenGL（10）光照模型基础

文章目录物体的光照模型立方体坐标构建立方体的6个面代码框架widget.cpp顶点着色器片元着色器Ambient 环境光Diffuse 漫反色法向量计算漫反射分量Specular Highlight镜面高光计算镜面反射分量补充&#xff1a;半程向量的使用物体的光照模型 出于性能的原因&#xff0c;一般使用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023