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

创建期：beforeCreate、created

挂载期：beforeMount 、mounted

更新期：beforeUpdate、updated

销毁期：beforeUnmount 、unmountd

<script>
export default{
beforeCreate(){console.log("创建之前")
},
created(){console.log("创建之后")
},
beforeMount(){console.log("挂载之前")
},
mounted(){console.log("挂载之后")
},
beforeUpdate(){console.log("更新之前")
},
updated(){console.log("更新之后")
},
beforeUnmount(){console.log("销毁之前")
},
unmountd(){console.log("销毁之后")
}
}
</script>

应用场景

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

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

2、 axios网络请求渲染数据

ref获取元素DOM结构

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

<template><!--创建期：beforeCreate、created挂载期：beforeMount 、mounted更新期：beforeUpdate、updated销毁期：beforeUnmount 、unmountd--><p ref="life">组件生命周期</p></template><script>export default{mounted(){console.log(this.$refs.life)}}</script>

axios网络请求渲染数据

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

项目下安装axios依赖

yarn add axios

组件引用

import axios from 'axios'

CompnentLife.vue

<template><!--创建期：beforeCreate、created挂载期：beforeMount 、mounted更新期：beforeUpdate、updated销毁期：beforeUnmount 、unmountd--><p ref="life">组件生命周期</p><p v-for="(info,index) in dataInfo" :id="index">{{info}}</p></template><script>import axios from 'axios'export default{data(){return{dataInfo: []}},mounted(){console.log(this.$refs.life);axios({method:"get",url:"http://localhost:8007/OS/getOSInfo",// changeOrigin:true  允许跨域}).then(res=>{console.log(res.data)this.dataInfo=res.data;})}}</script>

效果

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);//全局挂载axiosapp.config.globalProperties.$axios=axios//注入 (展示名，注入名)app.component("Item",Item)app.mount('#app');

CompnentLife.vue

<script>
import axios from 'axios'
export default{data(){return{dataInfo: []}},mounted(){console.log(this.$refs.life);axios({method:"get",url:"/OS/getOSInfo",// changeOrigin:true  允许跨域}).then(res=>{console.log(res.data)this.dataInfo=res.data;})}
}
</script>

可能遇到问题

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;// 服务器IPprivate 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;
}