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

每个 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);
});