手拉手Vue3生命周期实战应用

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

创建期：beforeCreate、created

挂载期：beforeMount 、mounted

更新期：beforeUpdate、updated

销毁期：beforeUnmount 、unmountd

应用场景

组件的生命周期是非常重要的，常见的应用场景：

1、 通过ref获取元素DOM结构

2、 axios网络请求渲染数据

ref获取元素DOM结构

使用ref 属性，挂载结束后引用会暴露在$refs.

axios网络请求渲染数据

Axios，是一个基于promise 的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

项目下安装axios依赖

yarn add axios

组件引用

import axios from 'axios'

CompnentLife.vue

效果

vue全局绑定axios

// import './assets/main.css'



import { createApp } from 'vue'

             import App from './App.vue'

//引入

             import Item from './components/Item.vue'

             import axios from 'axios'



     axios.defaults.baseURL = "http://localhost:8007"

             const app =createApp(App);

//全局挂载axios

     app.config.globalProperties.$axios=axios



//注入 (展示名，注入名)

app.component("Item",Item)

             app.mount('#app');

CompnentLife.vue

可能遇到问题

Access to XMLHttpRequest at 'http://localhost:8007/OS/getOSInfo' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决办法1

后端加上@CrossOrigin 注解//表示都允许跨域访问

@CrossOrigin //表示都允许跨域访问

后端

package com.example.domain;
import lombok.Data;

@Data
public class OsInfo {
    // cpu供应商
    private String cpuVendor;
    //  cpu名称
    private String cpuName;
    // CPU核心数
    private long cpuNum;
    // CPU总的使用率
    private String totalPercent;
    // CPU用户使用率
    private String usedPercent;
    // CPU当前等待率
    private String waitPercent;
    // CPU系统使用率
    private String sysPercent;
    //  CPU当前空闲率
    private String idlePercent;

    // 操作系统
    private String osName;
    // 系统架构
    private String osArch;
    // 服务器名称
    private String HostName;
    // 服务器IP
    private String HostAddress;
    // 项目路径
    private String userDir;
    // 操作系统信息
    private String sunDesktop;

    // jvm总内存
    private String totalMemory;
    // JVM空闲内存
    private String freeMemory;
    // Jvm已使用内存
    private String usedMemory;
    // JVM最大可用内存总数
    private String maxMemory;
    // jvm内存使用率
    private String useRate;
    // jvm内存空闲率
    private String freeRate;
    // Java版本
    private String jdkVersion;
    // jdk安装目录
    private String jdkHome;
}