Vue学习笔记（五）

目录

Vue3的生命周期

 链接后端（Springboot）：

前端发送请求的方式：

跨域：两种解决方式：

1.配置跨域

2.反向代理（基于vitejs）

Vue3的生命周期

生命周期是对于组件的一个概念
1、setup() :开始创建组件之前，在beforeCreate和created之前执行,创建的是
data和method（可以理解为setup()等价于beforeCreate和created）
2、onBeforeMount() :组件挂载到节点上之前执行的函数;页面开始渲染
3、onMounted() :组件挂载完成后执行的函数(页面开始渲染后执行，mounted只
会执行一次)可用来实现页面初始化;
4、onBeforeUpdate(): 组件更新之前执行的函数( Dom更新前执行) ;dom更新
5. onUpdated(): 组件更新完成之后执行的函数( Dom更新后执行) ;页面销毁
6、onBeforeUnmount(): 组件卸载之前执行的函数;
7、onUnmounted(): 组件卸载完成后执行的函数

A.vue: 

<template>
    <div>
      这是A组件
      <br />
      <span ref="span">{{ msg }}</span>
      <br />
      <button @click="change">点击</button>
    </div>
  </template>
  <script setup>
  import { ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue';
  console.log("这是setup")

const msg = ref("hello")
const span = ref()
const change=()=>{
  msg.value = "world"
}

//第一对：代表DOM的创建过程
//onBeforeMount是创建前
//Mounted代表创建完成
//在DOM创建前输出span内容，结果undefined
//可选链：?.可以避免undefined报错
  onBeforeMount(()=>{
    console.log(span.value?.innerText);
  })
//创建之后输出span内容，结果为hello
  onMounted(()=>{
    console.log(span.value?.innerText);
  })


//更新的生命周期
//onBeforeUpdate是更新前的DOM
//输出更新前：hello
  onBeforeUpdate(()=>{console.log(span.value?.innerText)}) 
//onUpdated是更新完成的DOM
//输出更新后：world
  onUpdated(()=>{console.log(span.value?.innerText)})

//销毁的生命周期（可用v-if销毁----动态销毁DOM，v-show是display设置为none）
  onBeforeUnmount(()=>{console.log("销毁了")})
  onUnmounted(()=>{console.log("销毁了")})
  </script>
  <style></style>

App.vue:

<template>
   <div class="app">
   <A v-if="type"></A>
   <br />
   <button @click="destroy">destroy</button>
   </div>
</template>
<script setup>
import { ref} from 'vue';
import A from './components/A.vue'
const type=ref(true)
const destroy=()=>{
    type.value=false
}
</script>
<style>
</style>

 链接后端（Springboot）：

数据正常不放在前端，数据正常放在数据库里面，中间的桥梁就是后端，形式就是接口，前端发送请求<=>后端<=>访问数据库

前端发送请求的方式：

1.Ajax：优点：避免频繁的原生的操作；缺点：Ajax大概有88%以上都是用来操作DOM的，只有少部分是用来发请求的。

2.axios：目前最主流的一种方式 优点：轻量

请求是异步的，如果是同步的，如果我们请求比较慢，那么我们后面所有的操作，都得等这个请求结束

同源策略：协议、域名、端口号都一样

跨域：两种解决方式：

1.配置跨域

        （1）注解 ：

                后端加上CrossOrigin

 App.vue

<template>
   <div class="app">
   App
   <button @click="get">get</button>
   <button @click="post">post</button>
   </div>
</template>
<script setup>
import { ref} from 'vue';
import axios from 'axios'
// axios.defaults.baseURL='/api/'
const get = () => {
    axios.get("http://localhost:8080/get").then((response)=> {
        console.log(response);//这是get请求
    })
}
const post =() => {
    axios.post("http://localhost:8080/post").then((response)=> {
        console.log(response);//这是post请求
    })
}
</script>
<style>
</style>

效果图：

 

2.反向代理（基于vitejs）

(1)配置vite.config.js

 （2）在application.yml文件中增加severletpath

（3）修改App.vue

 效果与配置跨域效果相同