【vue04】Vue生命周期四个阶段,八个钩子；vue使用axios

目录

Vue生命周期钩子

vue生命周期钩子介绍

​​​​​​​八大钩子

​编辑

四大阶段

初始化阶段

挂载阶段

更新阶段

销毁阶段

vue使用axios

vue使用axios流程

axios挂载到vue原型

---

Vue生命周期

vue生命周期钩子介绍

vue生命周期钩子介绍 ： vue从创建到销毁过程中，会执行的一些回调函数

钩子 ： 回调函数的一种

生命周期 ： vue实例从出生到扑街的过程

• 出生：

  • 创建vue实例

  • 创建data数据

  • 创建el挂载点

  • 将data数据渲染到el挂载点

• 扑街

  • vue实例被销毁

    • 这里销毁不是指vue实例变成了null，而是指解除data与el的关联

      • 说人话：修改了data，页面不会被渲染

==注意点==

• 根据官网文档介绍 ： 每一个生命周期钩子中的this都是指向vue实例

• 所以，生命周期钩子不能是箭头函数

• 因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。(官网解释)

八大钩子

两个最常用​​​​​​​的钩子:

created() :一般用于发送ajax(页面一加载需要发送ajax在这个勾子）

mounted():一般用于操作DOM（页面一加载需要操作DOM在这个勾子）

在一个生命周期中有两个钩子会执行多次，其他钩子都是执行一次

beforeUpdate、updated

执行顺序	钩子函数	执行时机
1	beforeCreate(){}	vue实例创建了，但是el和data还没有创建 （准备创建data） 底层（初始化vue实例，初始化钩子函数，初始化一些事件和侦听器配置项）
2	created() {}	data数据创建了，但是el挂载点还没有创建 (准备创建el) 底层：初始化data中的数据和methods中的方法
3	beforeMount() {}	el挂载点创建了，但是data数据还没有渲染（准备渲染中） 底层：创建el挂载点，并且生成虚拟DOM
4	mounted() {}	data数据 第一次 渲染完毕 (完成初始渲染) 底层：将虚拟dom渲染成真实DOM
5	beforeUpdate() {}	检测到data数据变化，但是还没有开始重新渲染 (data变了，准备重新渲染中) 会执行多次
6	updated() {}	变化后的data数据 ，完成渲染到页面 （完成重新渲染）会执行多次
7	beforeDestroy() {}	vue实例销毁即将销毁(解除data与el的关联),之后修改data，页面不会被渲染 底层 ： 解除 事件绑定、侦听器、组件
8	destroyed() {}	vue实例已经销毁

四大阶段

初始化阶段

1.new Vue() – Vue实例化(组件也是一个小的Vue实例)

2.Init Events & Lifecycle – 初始化事件和生命周期函数

3.beforeCreate – 生命周期钩子函数被执行

4.Init injections&reactivity – Vue内部添加data和methods等

5.created – 生命周期钩子函数被执行, 实例创建

6.接下来是编译模板阶段 –开始分析

7.Has el option? – 是否有el选项 – 检查要挂到哪里

没有. 调用$mount()方法

有, 继续检查template选项

• 1.beforeCreate钩子

  • 这个钩子几乎不怎么用

  • 初始化vue实例

  • 初始化事件(不是页面点击事件哈，就是vue本身自带的一些事件)

  • 初始化声明周期函数

• 2.created

  • 这个钩子非常重要

    • 经典应用 ： 页面一加载, ajax请求数据渲染页面。一般写在这个钩子里面

  • 初始化data中数据

  • 初始化methods里面的方法

挂载阶段

1.template选项检查

   有 - 当前vue环境是脚手架， webpack就会编译.vue文件

    没有- 当前vue环境是html环境

2.虚拟DOM挂载成真实DOM之前

3.beforeMount – 生命周期钩子函数被执行

4.Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5.真实DOM挂载完毕

6.mounted – 生命周期钩子函数被执行

• 3.beforeMount

  • 这个钩子不常用

  • 根据你的vue代码环境(html环境与脚手架环境),来编译模板html结构

  • 完成el挂载点加载（生成虚拟DOM）

• 4.mounted

  • 这个钩子很重要

    • 这个钩子是最早可以获取页面DOM元素的钩子

  • 虚拟DOM和渲染的数据一并挂到真实DOM上

更新阶段

1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁(patch局部更新)到真实DOM

4.updated – 生命周期钩子函数被执行

5.当有data数据改变 – 重复这个循环

这两个钩子会执行多次，只要data中数据变化了，就会执行

• 5.beforeUpdate

  • 这个钩子用的不是较多

  • 检测data数据变化， 修改虚拟DOM

• 6.updated

  • 这个钩子用的不是较多

  • 完成data渲染（将虚拟DOM渲染成真实DOM）

销毁阶段

1.当$destroy()被调用 – 比如组件DOM被移除(例v-if)

2.beforeDestroy – 生命周期钩子函数被执行

3.拆卸数据监视器、子组件和事件侦听器

4.实例销毁后, 最后触发一个钩子函数

5.destroyed – 生命周期钩子函数被执行

• 7.beforeDestroy

  • 这个钩子有些场景会用到

    • 例如在这个钩子里面移除定时器clearInterval()

  • 这个钩子准备移除你的组件

  • 移除数据监视器，侦听器等

• 8.destroyed

  • 这个钩子几乎不怎么用，因为已经GG了，一切都晚了

vue使用axios

axios特点回顾

• 支持客户端发送Ajax请求

• 支持服务端Node.js发送请求

• 支持Promise相关用法

• 支持请求和响应的拦截器功能

• 自动转换JSON数据

• axios 底层还是原生js实现, 内部通过Promise封装的

vue使用axios流程

• 1.下载axios : 在根目录执行npm命令:

• npm i axios

  • 脚手架基于webapck,而webpack又基于node. 因此vue项目所有的包都可以用npm来下载管理

• 下载失败情况:

   需要把package.json中的eslint开头的删掉,再次下载即可

• 

   

• 2.导入axios : 需要使用ES6模块化语法

  import axios from "axios"

• 3.使用axios : 与之前语法一致

axios挂载到vue原型

1. axios挂载到vue原型作用 ： 让所有的组件全部都可以使用axios,而无需导入

2. 底层原理： 每一个组件都是vue实例对象（之前反复强调这句话还记得吗~），只要把数据挂载到vue的原型中，那么任何组件都可以通过原型链访问到你挂载的数据。

3. 举一反三 ： 这种思想非常的重要，在今后的vue学习中。只要一个对象在所有组件都能使用，而无需导入。那么只需要将其在main.js文件中挂载到vue的原型中即可。

• 1.下载axios

  • npm i axios

• 2.在main.js中将axios挂载到Vue构造函数原型中

• //(1)导包
  import axios from 'axios'
  //(2)设置axios基地址
  axios.defaults.baseURL = "https://www.escook.cn"
  //(3)将axios挂载到Vue构造函数原型中
  Vue.prototype.$axios = axios

• 3.在created钩子中发送ajax请求

• 举一反三 : created钩子中完成data数据的初始化，所以只要一个数据你希望页面一加载的时候就获取，那么一般会写在created钩子中

  export default {
    name: "App",
    components: {},
    // 页面一加载就请求数据
    async created() {
      const {
        data: { data: res },
      } = await axios.get("https://autumnfish.cn/api/joke/list", {
        params: { num: 10 },
      });
      console.log(res);
    },
  
    methods: {
      // 点击登录按钮
      async dologin() {
        const {
          data: { msg: res },
        } = await axios.post("http://ajax-base-api-t.itheima.net/api/login", {
          username: "admin",
          password: "123456",
        });
        console.log(res);
      },
    },
  };