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

简介: 手拉手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;
}
目录
相关文章
|
8天前
|
JavaScript 前端开发 索引
「Vue3系列」Vue3 条件语句/循环语句
在 Vue 3 中,你可以使用条件语句来动态地控制模板中的渲染内容。Vue 提供了多种方式来实现条件渲染,包括 `v-if`、`v-else-if`、`v-else` 和 `v-show` 指令。
31 0
|
6天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue3——如何实现页面访问拦截
Vue3——如何实现页面访问拦截
|
20小时前
|
JavaScript
vue3+vite项目配置ESlint
vue3+vite项目配置ESlint
5 0
|
20小时前
乾坤子应用配置(vue3+vite)
乾坤子应用配置(vue3+vite)
4 0
|
1天前
|
缓存 JavaScript 前端开发
vue项目实战:实战技巧总结(中)
vue项目实战:实战技巧总结
9 1
|
6天前
|
JavaScript 前端开发 开发者
浅谈Vue 3的响应式对象: ref和reactive
浅谈Vue 3的响应式对象: ref和reactive
|
8天前
|
缓存 JavaScript API
「Vue3系列」Vue3 计算属性(computed)、监听属性(watch)
在 Vue 3 中,计算属性(Computed Properties)是一种强大的功能,它允许你声明一个依赖于其他响应式数据属性的属性,并且这个属性的值会根据其依赖的数据的变化而自动更新。计算属性是基于它们的依赖关系进行缓存的,只有在它的相关依赖发生改变时才会重新求值。
23 0
|
9天前
|
存储 JavaScript 算法
Vue2 和Vue3 有什么区别
Vue2 和Vue3 有什么区别
|
Web App开发 JSON JavaScript
Vue 实战 (一) -- Vue 基础总结
Vue作为一个前端轻量级的MVVM框架有其独到之处,本文主要针对Vue1.0版本的官方文档进行梳理总结,主要包括以下几个方面:1.数据绑定2.指令3.组件4.事件5.过滤器
2391 0