每个 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); //全局挂载axios app.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; // 服务器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; }
