vue-组件生命周期+网络请求

​🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue-组件生命周期+网络请求

目录

组件生命周期

1. Vue的生命周期

2. Vue 子组件和父组件执行顺序

3. created和mounted的区别

4. 一般在哪个生命周期请求异步数据

5. keep-alive 中的生命周期哪些

6.vue2的生命周期钩子函数

完整案例 官方解释

网络请求

1.基础语法

2.拦截器

3.取消网络请求

组件生命周期

生命周期：指的是Vue组件自其开始创建到其被销毁完毕这段时间范围。

在生命周期的这个范围内，作者将其4个重要阶段，同时作者为了方便开发者指定组件在特定时间做一些特定的操作，对外暴露了一些特定名称的函数，这些函数我们称之为生命周期钩子函数。常用的生命周期钩子函数一共有10个，外加1个不常用的错误边界周期，共11个生命周期函数。本节我们将依据其四个阶段，来学习其中最常见的8个周期函数。

四个阶段

  • 组件创建阶段

    • beforeCreate

    • created

  • 组件挂载阶段

    • beforeMount

    • mounted

  • 组件更新阶段（如果强制执行该阶段周期，可以this.$forceUpdate()）

    • beforeUpdate

    • updated

  • 组件销毁阶段（如果期望手动效果组件，可以执行this.$destroy()）

    • beforeDestroy

    • destroyed

生命周期

1. 说一下Vue的生命周期

Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。

  1. beforeCreate（创建前）：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。

  2. created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 $el 属性。

  3. beforeMount（挂载前）：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。

  4. mounted（挂载后）：在el被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html 页面中。此过程中进行ajax交互。

  5. beforeUpdate（更新前）：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。

  6. updated（更新后） ：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

  7. beforeDestroy（销毁前）：实例销毁之前调用。这一步，实例仍然完全可用，this 仍能获取到实例。

  8. destroyed（销毁后）：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。

另外还有 keep-alive 独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 activated 钩子函数。

2. Vue 子组件和父组件执行顺序

加载渲染过程：

  1. 父组件 beforeCreate

  2. 父组件 created

  3. 父组件 beforeMount

  4. 子组件 beforeCreate

  5. 子组件 created

  6. 子组件 beforeMount

  7. 子组件 mounted

  8. 父组件 mounted

更新过程：

  1. 父组件 beforeUpdate

  2. 子组件 beforeUpdate

  3. 子组件 updated

  4. 父组件 updated

销毁过程：

  1. 父组件 beforeDestroy

  2. 子组件 beforeDestroy

  3. 子组件 destroyed

  4. 父组件 destoryed

3. created和mounted的区别

  • created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

  • mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

4. 一般在哪个生命周期请求异步数据

我们可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。

推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

  • 能更快获取到服务端数据，减少页面加载时间，用户体验更好；

  • SSR不支持 beforeMount 、mounted 钩子函数，放在 created 中有助于一致性。

5. keep-alive 中的生命周期哪些

keep-alive是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

如果为一个组件包裹了 keep-alive，那么它会多出两个生命周期：deactivated、activated。同时，beforeDestroy 和 destroyed 就不会再被触发了，因为组件不会被真正销毁。

当组件被换掉时，会被缓存到内存中、触发 deactivated 生命周期；当组件被切回来时，再去缓存里找这个组件、触发 activated钩子函数。

6.vue2的生命周期钩子函数

完整案例 官方解释

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue2 生命周期</title>
</head>
<body>
  <div id="app">
    {{ count }}
    <button @click="add">加1</button>
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  // new Vue({
  //   data: {
  //     count: 100
  //   }
  // }).$mount('#app')
​
  new Vue({
    el: '#app',
    data: {
      count: 100
    },
    methods: {
      add () {
        this.count++
        if (this.count === 110) {
          this.$destroy()
        }
      }
    },
    beforeCreate () { // 备孕 
      // 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
      console.log('beforeCreate')
    },
    created () { // 备孕怀上  意外怀孕  ----  请求数据，修改状态 --- 但是不建议 - 不确定性
      // 在实例创建完成后被立即同步调用。
      // 在这一步中，实例已完成对选项的处理，
      // 意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。
      // 然而，挂载阶段还没开始，且 $el property 目前尚不可用。
      console.log('created')
    },
    beforeMount () { // 怀胎十月
      // 在挂载开始之前被调用：相关的 render 函数首次被调用。
      console.log('beforeMount')
    },
    mounted () { // 出生了 --- 数据请求，修改状态，DOM操作，实例化操作，定时器，延时器
      // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
      // 如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
      // 注意 mounted 不会保证所有的子组件也都被挂载完成。
      // 如果你希望等到整个视图都渲染完毕再执行某些操作，
      // 可以在 mounted 内部使用 vm.$nextTick：
      console.log('mounted')
      this.$nextTick(() => { // 保证了整个视图都渲染完毕
        // 业务逻辑
      })
    },
    beforeUpdate () {
      // 在数据发生改变后，DOM 被更新之前被调用。
      console.log('beforeUpdate')
    },
    updated () { // DOM操作，实例化操作
      // 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
      // 不要修改状态，使用计算属性 和watcher代替
      console.log('updated')
    },
    beforeDestroy () { // 一不小心触发条件  ---  取消定时器，延时器，销毁对象等
      // 实例销毁之前调用。在这一步，实例仍然完全可用。
      console.log('beforeDestroy')
    },
    destroyed () { // 没了
      // 实例销毁后调用。
      // 该钩子被调用后，对应 Vue 实例的所有指令都被解绑，
      // 所有的事件监听器被移除，所有的子实例也都被销毁。
      console.log('destroyed')
    }
  })
</script>
</html>

网络请求

  • xhr xmlHttpRequest

  • jQuery

    • $.get

    • $.post

    • $.ajax

    • $.getJSON

  • fetch，语法：fetch(url,{})

1.基础语法

如上一节所说，在Vue组件中如果需要发送网络请求正常需要写在created生命周期函数中。而之前发送网络请求我们采用的是xhr或$.ajax()等较早的技术，Vue的作者推荐开发者在Vue中使用axios作为网络请求库。axios具备：

  • 支持Promise

  • 良好的兼容性

  • 支持拦截器 统一处理请求和响应

  • 对json格式的数据处理十分友好

  • 能够根据请求体格式自动设置请求头

    • 当请求体是普通js对象格式时，axios自动设置请求头为application/json

    • 当请求体是查询字符串时，axios自动设置请求头为application/x-www-form-urlencoded

  • 支持对请求进行取消

  • 支持restful规范中涉及到的请求动词

axios是一个第三方库，如果需要在项目中使用则需要先安装：

npm i axios

安装好后即可在项目中的组件里进行使用，例如我们可以按照下面的语法发送一个get请求：

import axios from "axios"
export default {
    created(){
        axios.get(可带问号参数的请求地址).then(res => {})
        // axios的get参数支持与请求地址分离，因此下面的语法也是可以的
        // axios.get(不带问号参数的地址,{params: {参数名:值,...}}).then(res => {})
    }
}

如果需要使用axios来发送一个post请求，则：

import axios from "axios"
export default {
    created(){
        // 请求参数支持：
        // - 查询字符串，如：id=1&age=22&name=zhangsan
        // - 普通js对象，如：{id: 1,age: 22,name: 'zhangsan'}
        // 请求头Content-Type会被根据参数类型自动设置
        axios.post(请求地址,参数).then(res => {})
    }
}

除了通过axios.*这种方式进行请求，axios还支持：

import axios from "axios"
export default {
    created(){
        axios({
            baseURL: 基础地址
            url: 请求路径,
            method: 请求动词,
            data: 参数,
            timeout: 超时时间,
            headers: {}
            // ...
        })
    }
}

请求的then回调中我们可以获取到结果对象：

{ 
    config：axios请求配置信息
    data：响应体
    headers：响应头信息
    request：xhr请求对象
    status：HTTP响应码
    statusText: 状态文本信息
}

案例：请使用axios库在组件中访问https://api.i-lynn.cn/college，并传入参数page来获取指定页码的数据，随后通过之前学习过的知识点展示在视图上

2.拦截器

拦截器主要的作用就是拦截，用于拦截请求和响应：

  • 请求拦截器

    • 用于拦截请求，在请求发出去之前拦截。

  • 响应拦截器

    • 用于拦截响应，在收到响应之后、then之前拦截。

不管是请求拦截器还是响应拦截器，主要的好处体现在后续项目的封装中，到时候我们会对axios进行封装，这样一来，拦截器就成了全局的拦截器了。

在全局的环境下，我们可以通过拦截器做很多有用的操作，例如：

  • 通过请求拦截器去设置统一的请求头

  • 通过响应拦截器中去，可以在这里做错误提示

// 请求拦截器
axios.interceptors.request.use(cfg => {
    // 设置请求头
    cfg.headers.Abc = "abcdefg"
    return cfg
})
​
// 响应拦截器
axios.interceptors.response.use(res => {
    return res.data
})

3.取消网络请求

在开发中还是经常容易遇到的，一般在离开组件的时候可能需要做网络请求的取消操作。在axios中取消网络请求通过cancelToken这个方式进行取消。

    1. 获取到source对象，该对象中有俩个成员属性

    • cancelToken配置项要的值：token

    • 后续取消请求的方法：cancel()

    1. 需要将source.token给到后续可能需要取消的网络请求的cancelToken这个配置项

    1. 在合适的时机去执行取消网络请求方法source.cancel()

综合案例：通过axios发送一个网络请求，判断本地是否有缓存数据，如果有直接使用缓存并且取消网络请求；如果本地没有这个数据的缓存，则发起请求去获取，请求到后缓存数据。要求使用拦截器

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

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

相关文章

消息通讯-MQTT WebHookSpringBoot案例

消息通讯-MQTT WebHookSpringBoot案例

一、EMQX WebHook介绍 1、EMQX WebHook 是由 emqx_web_hook (opens new window)插件提供的将EMQX中的钩子事件通知到某个Web服务的功能。 2、WebHook 的内部实现是基于钩子&#xff0c;借助 Webhook 可以完成设备在线、上下线记录&#xff0c;订阅与消息存储、消息送达确认等诸…
阅读更多...
【开源】基于Vue和SpringBoot的固始鹅块销售系统

【开源】基于Vue和SpringBoot的固始鹅块销售系统

项目编号&#xff1a; S 060 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S060&#xff0c;文末获取源码。} 项目编号&#xff1a;S060&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 鹅块类型模块2.3 固…
阅读更多...
绕过类安全问题分析方法

绕过类安全问题分析方法

什么是绕过 逻辑漏洞是指程序设计中逻辑不严密&#xff0c;使攻击者能篡改、绕过或中断程序&#xff0c;令其偏离开发人员预期的执行。 常见表现形式 1、接口&#xff08;功能类&#xff09;绕过&#xff1a;即接口或功能中通过某参数&#xff0c;绕过程序校验 2、流程类绕…
阅读更多...
[模版总结] - 树的基本算法2 - BST

[模版总结] - 树的基本算法2 - BST

BST定义 BST - Binary Search Tree, 即二叉搜索树(有序二叉树) 特性 中序遍历有序查找/插入/删除某个数值可以通过 即树的高度&#xff0c;最优,最坏 . 有多种改进BST可以动态维持插入删除后树结构能尽可能保持平衡 BST基本操作 查询 - 二分查找 搜索数值 - 二分法 class…
阅读更多...
有Mac或无Mac电脑通用的获取安卓公钥的方案

有Mac或无Mac电脑通用的获取安卓公钥的方案

从2023年9月开始&#xff0c;所有上架应用市场的app都需要进行APP备案。 其中后端服务器在阿里云的可以在阿里云备案&#xff0c;后端服务器在腾讯云的可以在腾讯云备案。但无论你是在什么云厂商里做备案&#xff0c;无一例外的是&#xff0c;无论是上架安卓应用还是上架IOS应…
阅读更多...
Python大数据学习问题整理汇总

Python大数据学习问题整理汇总

day01 分区表与分桶表的区别 在这里插入代码片day02 数据仓分层/与本质 数据仓库(OLAP)的本质叫联机分析处理, 一般针对某些主题的历史数据进行分析 主要面向分析,支持管理决策。源数据层&#xff08;ODS&#xff09;&#xff1a; 此层数据无任何更改&#xff0c;直接沿用外围…
阅读更多...
【2021集创赛】基于arm Cortex-M3处理器与深度学习加速器的实时人脸口罩检测 SoC

【2021集创赛】基于arm Cortex-M3处理器与深度学习加速器的实时人脸口罩检测 SoC

团队介绍 参赛单位&#xff1a;深圳大学 队伍名称&#xff1a;光之巨人队 指导老师&#xff1a;钟世达、袁涛 参赛队员&#xff1a;冯昊港、潘家豪、慕镐泽 图1 团队风采 1. 项目简介 新冠疫情席卷全球&#xff0c;有效佩戴口罩可以极大程度地减小病毒感染的风险。本项目开发…
阅读更多...
JWT登录认证（3拦截器）

JWT登录认证（3拦截器）

Jwt登录认证&#xff08;拦截器&#xff09;&#xff1a; 使用拦截器统一验证令牌 登录和注册接口需要放行 interceptors.LoginInterceptor&#xff1a;&#xff08;注册一个拦截器&#xff09; package com.lin.springboot01.interceptors;import com.lin.springboot01.pojo.…
阅读更多...
wpf devexpress添加TreeListControl到项目

wpf devexpress添加TreeListControl到项目

此教程示范如何添加TreeListControl到项目和绑定控件自引用数据源&#xff1a; 添加数据模型 绑定tree&#xff0c;并添加如下字段到数据源对象&#xff1a; Key字段包含唯一值索引节点 Parent字段包含父索引节点 添加数据模型&#xff08;Employee和Staff类&#xff09;到…
阅读更多...
物理驱动深度学习方法总结

物理驱动深度学习方法总结

一、物理驱动深度学习方法总结 现有博主更新物理驱动深度学方法总体介绍 二、 PINN介绍 PINN综述Blog介绍&#xff1a;内嵌物理知识神经网络 &#xff08;Physics Informed Neural Network&#xff0c;简称PINN&#xff09; 是一种科学机器在传统数值领域的应用方法&…
阅读更多...
软件测试基础 —— 单元测试

软件测试基础 —— 单元测试

Hello&#xff01;大家好&#xff0c;我是BugBear&#xff0c;一个专注于分享软件测试干货的测试开发。 对于软件测试&#xff0c;我们先按照开发阶段来进行划分&#xff0c;将软件测试分为单元测试、集成测试、系统测试、验收测试&#xff0c;下面我们来聊聊单元测试。 1、什…
阅读更多...
JVM-HotSpot虚拟机对象探秘

JVM-HotSpot虚拟机对象探秘

目录 一、对象的实例化 &#xff08;一&#xff09;创建对象的方式 &#xff08;二&#xff09;创建对象的步骤 二、对象的内存布局 &#xff08;一&#xff09;对象头 &#xff08;二&#xff09;实例数据 &#xff08;三&#xff09;对齐填充 三、 对象的访问定位 &…
阅读更多...
小迈迈驰组态软件支持国产龙芯2K1000等处理器

小迈迈驰组态软件支持国产龙芯2K1000等处理器

自2019年起&#xff0c;南京迈思德电气自动化有限公司组织研发团队&#xff0c;进行跨平台组态软件的研发&#xff0c;适配国产处理器&#xff0c;目前已经完成单机版产品的研发&#xff0c;并在基于龙芯2K1000处理器[Loongnix操作系统]的加固人机界面产品上应用。 Loongnix是龙…
阅读更多...
可逆矩阵的性质

可逆矩阵的性质

如果矩阵A可逆&#xff0c;那么它的逆矩阵也可逆&#xff0c;并且如果矩阵A可逆&#xff0c;假设是一个不为0的数&#xff0c;那么也可逆&#xff0c;并且如果矩阵A和都可逆&#xff0c;而且它们的阶数也相同&#xff0c;那么它们的乘积也是可逆的&#xff0c;并且如果矩阵A可逆…
阅读更多...
docker数据卷详细讲解及数据卷常用命令

docker数据卷详细讲解及数据卷常用命令

docker数据卷详细讲解及数据卷常用命令 Docker 数据卷是一种将宿主机的目录或文件直接映射到容器中的特殊目录&#xff0c;用于实现数据的持久化和共享。Docker 数据卷有以下特点&#xff1a; 数据卷可以在一个或多个容器之间共享和重用&#xff0c;不受容器的生命周期影响。…
阅读更多...
＜Linux＞（极简关键、省时省力）《Linux操作系统原理分析之Linux 进程管理 2》（6）

＜Linux＞（极简关键、省时省力）《Linux操作系统原理分析之Linux 进程管理 2》（6）

《Linux操作系统原理分析之Linux 进程管理 2》&#xff08;6&#xff09; 4 Linux 进程管理4.2 Linux 进程的状态和标识4.2.1 Linux 进程的状态及转换4.2.2 Linux 进程的标识4.2.3 进程标识哈希表 4 Linux 进程管理 4.2 Linux 进程的状态和标识 4.2.1 Linux 进程的状态及转换…
阅读更多...
提高Producer的发送速度

提高Producer的发送速度

发送一条消息出去要经过三步&#xff0c;一是客户端发送请求到服务器&#xff0c;二是服务器处理该请求&#xff0c;三是服务器向客户端返回应答&#xff0c;一次消息的发送耗时是上述三个步骤的总和。在一些对速度要求高&#xff0c;但是可靠性要求不高的场景下&#xff0c;比…
阅读更多...
2023年中国机动车拍卖网络化趋势加速，网络拍卖专场数量大幅上升至47489场[图]

2023年中国机动车拍卖网络化趋势加速，网络拍卖专场数量大幅上升至47489场[图]

2022年&#xff0c;由于机动车拍卖网络化趋势继续加速&#xff0c;网络拍卖专场数量大幅上升&#xff0c;全国机动车专场拍卖会高达59450场&#xff0c;较上年攀升125.31%。在389家拍卖企业中&#xff0c;举办场次超过100场的企业有27家&#xff0c;合计54850场&#xff0c;占比…
阅读更多...
11.4MyBatis(基础)

11.4MyBatis(基础)

一.搭环境 1.创建完SSM项目,添加MySQL和MyBatis后,项目启动一定会报错,这是正常情况. 2.配置文件 properties: server.port9090 spring.datasource.urljdbc:mysql://127.0.0.1:3306/test1?characterEncodingutf8&useSSLfalse spring.datasource.usernameroot spring.d…
阅读更多...
快速入门：构建您的第一个 .NET Aspire 应用程序

快速入门：构建您的第一个 .NET Aspire 应用程序

##前言 云原生应用程序通常需要连接到各种服务&#xff0c;例如数据库、存储和缓存解决方案、消息传递提供商或其他 Web 服务。.NET Aspire 旨在简化这些类型服务之间的连接和配置。在本快速入门中&#xff0c;您将了解如何创建 .NET Aspire Starter 应用程序模板解决方案。 …
阅读更多...
最新文章

Copyright @ 2022~2023