【Vue知识点- No5.】生命周期、axios、购物车案例_onmounted在没有要关联的活动组件实例时被调用。生命周期注入api只能在执行setup(

No5.生命周期、axios、购物车案例

知识点自测

• 知道window.onload的作用。
• ajax是什么, XMLHttpRequest的使用步骤。
• jQ的 $.ajax底层是什么?
• Promise的作用。
• async和await的作用-如何和Promise配合。
• 同步异步的概念, 代码执行顺序。
• 请求和响应, 以及JSON解析能力。
• Vue基础, 组件使用, props传值, 组件通信, 计算属性使用, 对象引用类型使用。
• axios挂载到Vue原型上。

学习目标

1.能够说出 vue 组件的生命周期。
2.能够掌握 axios 的使用。
4.能够了解 $refs, $nextTick 使用和 name 使用。
4.能够完成购物车案例开发。

1. vue生命周期

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

1-1.钩子函数

含义: 钩子函数是 Vue 框架的内置函数，随着组件的生命周期阶段，自动执行。

作用: 特定的时间点，执行特定的操作。
场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据。
分类: 4大阶段8个方法

官网文档-生命周期图示

1-2.初始化阶段

含义讲解:

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

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

3.beforeCreate – 生命周期钩子函数被执行，此时还无法获取到data/methods

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

5.created – 生命周期钩子函数被执行, 实例创建完毕（可以得到data和methods等等）

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

7.Has el option? – 是否有 el 选项 – 检查要挂到哪里
​ 没有. 调用 $mount() 方法
​ 有, 继续检查 template 选项

• components/Life.vue - 创建一个文件

<script>
export default {
     
    data(){
     
        return {
     
            msg: "hello, Vue"
        }
    },
    // 一. 初始化
    // new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
    beforeCreate(){
     
        console.log("beforeCreate -- 执行");
        console.log(this.msg); // undefined
    },
    // data和methods初始化以后
    // 场景: 网络请求, 注册全局事件
    created(){
     
        console.log("created -- 执行");
        console.log(this.msg); // hello, Vue

        this.timer = setInterval(() => {
     
            console.log("哈哈哈");
        }, 1000)
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

• App.vue - 引入使用

<template>
  <div>
    <h1>1.生命周期</h1>
 	<Life></Life>
  </div>
</template>

<script>
import Life from './components/Life'
export default {
   
  components: {
   
    Life
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1-3.挂载阶段

含义讲解:
1.template选项检查
​ 有 - 编译 template 返回 render 渲染函数
​ 无 – 编译 el 选项对应标签作为template(要渲染的模板)

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

3.beforeMount – 生命周期钩子函数被执行，此时还无法获取“真实”DOM元素

4.Create vm.$el and replace “el” with it – 把虚拟DOM和渲染的数据一并挂到真实的DOM上

5.真实DOM挂载完毕

6.mounted – 生命周期钩子函数被执行，组件挂载完毕，可以获取到真实的“DOM”

• components/Life.vue - 创建一个文件

<template>
  <div>
      <p>学习生命周期 - 看控制台打印</p>
      <p id="myP">{
  { msg }}</p>
  </div>
</template>

<script>
export default {
     
    // ...省略其他代码
    
    // 二. 挂载
    // 真实DOM挂载之前
    // 场景: 预处理data, 不会触发updated钩子函数
    beforeMount(){
     
        console.log("beforeMount -- 执行");
        console.log(document.getElementById("myP")); // null

        this.msg = "重新值"
    },
    // 真实DOM挂载以后
    // 场景: 挂载后真实DOM
    mounted(){
     
        console.log("mounted -- 执行");
        console.log(document.getElementById("myP")); // p
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

1-4.更新阶段

含义讲解:
1.当data里数据改变, 更新DOM之前

2.beforeUpdate – 生命周期钩子函数被执行。挂载以后data更新，将要更新DOM之前。

3.Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4.updated – 生命周期钩子函数被执行，获取更新的“真实”DOM

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

• components/Life.vue - 创建一个文件
• 准备ul+li循环, 按钮添加元素, 触发data改变->导致更新周期开始：

<template>
  <div>
      <p>学习生命周期 - 看控制台打印</p>
      <p id="myP">{
  { msg }}</p>
      <ul id="myUL">
          <li v-for="(val, index) in arr" :key="index">
              {
  { val }}
          </li>
      </ul>
      <button @click="arr.push(1000)">点击末尾加值</button>
  </div>
</template>

<script>
export default {
     
    data(){
     
        return {
     
            msg: "hello, Vue",
            arr: [5, 8, 2, 1]
        }
    },
    // ...省略其他代码

    // 三. 更新
    // 前提: data数据改变才执行
    // 更新之前
    beforeUpdate(){
     
        console.log("beforeUpdate -- 执行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // undefined
    },
    // 更新之后
    // 场景: 获取更新后的真实DOM
    updated(){
     
        console.log("updated -- 执行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // li
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

1-5.销毁阶段

含义讲解: 销毁：组件从真实的DOM上被移除。

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

2.beforeDestroy – 生命周期钩子函数被执行，手动清除：定时器/计时器/eventBus事件（$off）

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

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

5.destroyed – 生命周期钩子函数被执行，已经销毁。

• components/Life.vue - 准备生命周期方法(Life组件即将要被删除)

<script>
export default {
     
    // ...省略其他代码
    
    // 四. 销毁
    // 前提: v-if="false" 销毁Vue实例
    // 场景: 移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法
    beforeDestroy(){
     
        // console.log('beforeDestroy -- 执行');
        clearInterval(this.timer)
    },
    destroyed(){
     
        // console.log("destroyed -- 执行");
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• App.vue - 点击按钮让Life组件从DOM上移除 -> 导致Life组件进入销毁阶段

<Life v-if="show"></Life>
<button @click="show = false">销毁组件</button>

<script>
    data(){
   
        return {
   
            show: true
        }
    },
</script>
1
2
3
4
5
6
7
8
9
10
11
12

2. axios

2-1.axios基本使用

定义：axios是一个专门用于发送ajax请求的库。

axios官方文档

什么是ajax？ 一种前端异步请求后端的技术。
ajax原理： 浏览器window接口的XMLHttpRequest。
axios是什么？ 基于原生ajax+Promise技术封装的用于前后端的请求库。

特点：

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

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

get请求获取数据

功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台。
接口: 参考：8.接口文档
引入: 下载axios, 引入后才能使用。yarn add axios 或者 npm i axios
效果:

例子如下:

• components/UseAxios.vue

<template>
  <div>
    <p>1.获取所有图书信息</p>
    <button @click="getAllFn">点击-查看控制台</button>
  </div>
</template>

<script>
// 目标1: 获取所有图书信息
// 1. 下载axios：yarn add  axios 或者 npm i axios
// 2. 引入axios
// 3. 发起axios请求
import axios from "axios";
export default {
   
  methods: {
   
    getAllFn() {
   
      axios({
   
        url: "http://123.57.109.30:3006/api/getbooks",
        method: "GET", // 默认就是GET方式请求, 可以省略不写
      }).then((res) => {
   
        console.log(res);
      });
      // axios()-原地得到Promise对象
    },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

get传参

功能: 点击调用后台接口, 查询用户想要的书籍信息 – 打印到控制台上。
接口: 参考：8.接口文档
效果:

例子如下:

• components/UseAxios.vue，拿到用户输入框表单中的值，最简单的方式就是使用双向绑定：v-model

<template>
  <div>
    <p>2.查询某本书籍信息</p>
    <input type=
1
2
3