Vue生命周期

Vue-生命周期的使用

人的生命周期

一组件从 创建 到 销毁 的整个过程就是生命周期

Vue 的生命周期

2.Vue-钩子函数

目标

Vue 框架内置函数，随着组件的生命周期阶段，自动执行

讲解

作用: 特定的时间点，执行特定的操作

场景: 组件创建完毕后，可以在 created 生命周期函数中发起 Ajax 请求，从而初始化 data 数据

分类: 4 大阶段 8 个方法

• 初始化
• 挂载
• 更新
• 销毁

阶段	方法名	方法名
初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed

官网文档

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

3.Vue-初始化阶段

beforeCreate

create - 在此处访问 data 和 methods 等

4.Vue-挂载阶段

beforeMount

mount - 在此处获取真实 ＤＯＭ 元素

5.Vue-更新阶段

beforeUpdate

updated - 在此处获取更新后的真实 DOM 元素

6.Vue-销毁阶段

beforeDestroy

destoryed - 一般用于清除定时器和全局事件

7.axios-基本使用

目标

了解什么是 axios, 以及如何使用

讲解

axios 文档

特点

• 支持客户端发送 Ajax 请求
• 支持服务端 Node.js 发送请求
• 支持 Promise 相关用法
• 支持请求和响应的拦截器功能
• 自动转换 JSON 数据
• axios 底层还是原生 js 实现, 内部通过 Promise 封装的

全局配置

• axios.defaults.baseURL

  • 配置全局默认的基地址

axios 的基本使用

axios({
  method: "请求方式", // get post
  url: "请求地址",
  data: {
    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {
    // 拼接到请求行的参数, get请求的参数
    xxx: xxx,
  },
})
  .then((res) => {
    console.log(res.data); // 后台返回的结果
  })
  .catch((err) => {
    console.log(err); // 后台报错返回
  });

小结

1. 什么是 ajax?

   一种前端异步请求后端的技术

2. ajax 原理?

   浏览器 window 接口的 XMLHttpRequest

3. axios 是什么?

   基于原生 ajax+Promise 技术封装通用于前后端的请求库

props 类型检测

props: { 
	接收的变量: { 
    	type: 类型, 
    	default: 默认值, 
    	required: 必选项 
    }
}

今日总结

Vue 的生命周期哪 4 个阶段, 哪 8 个方法

axios 是什么, 底层是什么, 具体如何使用

axios 返回的是什么, 如何接收结果