每个 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;
}
注意:如果你,使用的是setup语法模式,是没有 beforeCreate 和 created 这两个生命周期的,这两个生命周期被 setup 代替
// 创建之前
是setup语法模式
onBeforeMount(() => {
console.log("创建之前");
});
// 创建完成
onMounted(() => {
console.log("创建完成");
});
// 更新之前
onBeforeUpdate(() => {
console.log("更新之前");
});
// 更新完成
onUpdated(() => {
console.log("更新完成");
});
// 卸载之前
onBeforeUnmount(() => {
console.log("卸载之前");
});
// 卸载完成
onUnmounted(() => {
console.log("卸载完成");
});
// 收集依赖
onRenderTracked((e) => {
console.log(e);
});
// 更新依赖
onRenderTriggered((e) => {
console.log(e);
});