Vue基础小白学习二-优快云博客

本文链接：https://blog.youkuaiyun.com/liyibowen2006/article/details/143838489

书接上文，还是一样，欢迎小白一起学习，也希望各位大佬能给些指点

13、组件的生命周期

每个组件在被创建的时候都要经历一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。（DOM：文档对象模型）同时在这个初始化过程中也会运行一些叫生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
vue生命周期分为四个阶段
第一阶段（创建阶段）：beforeCreate，created
第二阶段（挂载阶段）：beforeMount，mounted
第三阶段（更新阶段）：beforeUpdate，updated
第四阶段（销毁阶段）：beforeDestroy，destroyed
生命周期钩子函数详解：
（1）beforeCreate：在这个阶段，是获取不到数据的，并且真实的DOM元素也没有被渲染出来
（2）created：在这个阶段开始就可以访问数据了，但是页面当中真实的DOM元素还是没有被渲染出来，在这个函数中，可以进行相关初始化事件的绑定、发送请求操作
（3）beforeMount：在挂载开始之前被调用：相关的render函数首次被调用。这个阶段代表DOM马上要被渲染出来了，但是还没有真正的渲染出来，这个函数的用法与created函数用法基本一致，可以进行相关初始化事件的绑定，发送ajax操作（ajax是浏览器与服务器之间的一种异步通信方式）
（4）mounted：这是挂载阶段的最后一个钩子函数,数据挂载完毕，真实dom元素也已经渲染完成了,在这个钩子函数的内部可以做一些实例化相关的操作
（5）beforeUpdate：在数据发生改变后，DOM被更新之前被调用。这里适合在现有DOM将要被更新之前访问它，比如移除手动添加的事件监听器。这个钩子函数获取DOM的内容是更新之前的内容。
（6）updated：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。这个钩子函数获取dom的内容是更新之后的内容生成新的虚拟dom，新的虚拟dom与之前的虚拟dom进行比对，差异之后，就会进行真实dom渲染。在updated钩子函数里面就可以获取到因diff算法比较差异得出来的真实dom渲染了
（7）beforeDestory：在实例销毁之前调用，当组件销毁的时候，就会触发这个钩子函数代表销毁之前，可以做一些善后操作，可以清除一些初始化事件、定时器相关的东西
（8）destoryed：该钩子被调用后，对应Vue实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁
代码示例：（记得在App.vue里引用，在F12控制台中可以查看打印出的结果，即一个生命周期的过程）
<template>
<h3>生命周期函数</h3>
<button @click="数据">点击</button>
<p>{{ message }}</p>
</template>

<script>

export default {
name: 'MyComponent',
data(){
return{
message:""
}
},
beforeCreate(){
console.log("beforeCreate:组件创建之前");
},
created(){
console.log("created:组件创建完成");
},
beforeMount(){
console.log("beforeMount:渲染之前");
},
mounted(){
console.log("mounted:组件渲染完成");
},
beforeUpdate(){
console.log("beforeUpdate:组件更新之前");
},
updated(){
console.log("updated:组件更新完成");
},
beforeUnmount(){
console.log("beforeUnmount:组件卸载之前");
},
unmounted(){
console.log("unmounted:组件卸载完成");
},
}
</script>
<style>
</style>

14、Vue引入第三方

Swiper：一个免费、开源、强大的触摸滑动插件，是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，可以实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
安装：npm install --save swiper(如果要安装指定版本在这个指令后加@版本号)
swiper的官方文档：https://swiperjs.com/vue
在官方文档中有这个插件的详细讲解，我这里附上我学习时的代码
<template>
<div class="hello">
<Swiper :modules="modules" :pagination="{ clickable:true }">
<Swiper-slide>
<img src="../assets/a0kkf-0dnyk.png" alt="">
</Swiper-slide>
<Swiper-slide>
<img src="../assets/a0kkf-0dnyk.png" alt="">
</Swiper-slide>
<Swiper-slide>
<img src="../assets/a0kkf-0dnyk.png" alt="">
</Swiper-slide>
</Swiper>
</div>
</template>

import { Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination'
export default {
name: 'HelloWorld',
data(){
return{
modules:[ Pagination ]
}
},
components:{
Swiper,
SwiperSlide
}
}
</script>

15、Axios网络请求

Axios是一个基于promise的网络请求库
安装：npm install --save axios
引入：
组件中引入：import axios from "axios"
全局引入⬇
import axios from "axios"
const app=createApp(App);
app.config.globalProperties.$axios = axios
app.mount('#app')
//在组件中调用
this.$axios
前端向后端传输数据时，如果是get传输，直接传在url后;如果是post传输，则在请求体body中传输。在body中的数据格式又有两种，一种是 json 数据格式，另一种是字符串。具体要用哪种格式取决于后端入参的格式
网络请求方式：get请求，post请求，post请求需要对参数进行额外处理，转换参数格式：qs.stringify{}

16、Axios网络请求封装

在应用过程中，一个项目的网络请求会很多，此时一般的采取方案是将网络请求封装起来
步骤如下：
一，新建utils文件夹，定义request.js封装axios对象，主要处理post参数，请求前后拦截器，错误处理，导出封装的axios
二，新建api文件夹，定义path.js定义请求地址，导出封装的path
三，在api文件夹中定义api.js定义请求函数，导出封装的API
四，在vue代码中引入api，并在mounted函数中使用api中定义的函数
在这里附上学习时定义request.js的代码⬇
import axios from "axios"
import { error, log } from "console"
import { config } from "process"
import querystring from "querystring"
import { compile } from "vue"
//参考文档：https://www.kancloud.cn/yunye/axios/234845
const errorHandle = (status,info) =>{
switch(status){
case 400:
console.log("语义有误");
break;
case 401:
console.log("服务器认证失败");
break;
case 403:
console.log("服务器拒绝访问");
break;
case 404:
console.log("地址错误");
break;
case 500:
console.log("服务器遇到意外");
break;
case 502:
console.log("服务器无响应");
break;
default:
console.log(info);
break;
}

}
const instance = axios.create({
//网络请求的公共配置
timeout:5000
})
//拦截器最常用的

//发送数据之前
instance.interceptors.request.use(
config =>{
if(config.method === "post"){
config.data = querystring.stringify(config.data)
}
//config：包含网络请求的所有信息
return config;
},
error =>{
return Promise.reject(error)
}
)
//获取数据之前
instance.interceptors.response.use(
response =>{
return response.status === 200 ? Promise.resolve(response) : Promise.reject(response)
},
error =>{
const { response } = error;
//错误的处理才是最需要被我们关注的地方
errorHandle(response.status,response.info)

}
)
export default instance;