[JavaScript知识库]-Vue生命周期钩子

1.1-Vue生命周期钩子介绍

• vue生命周期钩子官方文档：

  • 官方文档图解介绍：生命周期图示

  • 官方文档详细介绍：vue生命周期钩子介绍

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

  • 钩子 ： 一种回调函数

    • 例如

      • window.onload = function(){ dom加载完毕，外部资源加载完毕就执行 }

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

    • 出生：

      • 创建vue实例

      • 创建data数据

      • 创建el挂载点

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

    • 扑街

      • vue实例被销毁

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

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

• ==注意点==

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

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

vue的生命周期钩子分为四大阶段,8个方法

• 初始化

• 挂载

• 更新

• 销毁

?

<template>
  <div>
    <p>我的名字是:{{ name }}</p>
    <button @click="doClick">点我改名字</button>
  </div>
</template>

<script>
export default {
  //数据
  data () {
    return {
      name: 'ikun'
    }
  },
  //事件
  methods: {
    doClick () {
      this.name = '黑马李宗盛'
    }
  },
  //生命周期钩子
  //1. vue实例创建了，但是el和data还没有创建 （准备创建data）
  beforeCreate () {
    console.log(this)
    console.log(1)
  },
  //2. data数据创建了，但是el挂载点还没有创建 (准备创建el)
  created () {
    console.log(this)
    console.log(2)
  },
  //3. el挂载点创建了，但是data数据还没有渲染（准备渲染中）
  beforeMount () {
    console.log(this)
    console.log(3)
  },
  //4. data数据 第一次 渲染完毕 (完成初始渲染)
  mounted () {
    console.log(this)
    console.log(4)
  },
  //5. 检测到data数据变化，但是还没有开始重新渲染 (data变了，准备重新渲染中)
  beforeUpdate () {
    console.log(this)
    console.log(5)
  },
  //6. 变化后的data数据 ，完成渲染到页面 （完成重新渲染）
  updated () {
    console.log(this)
    console.log(6)
  },
  //7. vue实例销毁即将销毁
  /* 什么时候会执行这个钩子？
    销毁vue实例 ： app.$destory()   例如v-if指令会让组件DOM被移除
    这行代码不是移除vue，而是解除data与el的关联
    说人话： 调用了app.$destory()之后，修改data，页面不会被渲染
    */
  beforeDestroy () {
    console.log(this)
    console.log(7)
  },
  //8. vue实例已经销毁
  destroyed () {
    console.log(this)
    console.log(8)
  }
}
</script>

<style></style>

1.2-初始化阶段

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.3-挂载阶段

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.4-更新阶段

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

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

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

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

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

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

• 5.beforeUpdate

  • 这个钩子用的不是较多

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

• 6.updated

  • 这个钩子用的不是较多

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

?

?

1.5-销毁阶段

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

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

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

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

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

• 7.beforeDestroy

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

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

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

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

• 8.destroyed

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

?

?

Vue使用axios( Vue 全家桶02)

• axios官网：axios中文文档|axios中文网 | axios

axios特点回顾

• 支持客户端发送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) // 后台报错返回
})

准备工作

?

接口文档

axios请求接口使用

根域名: http://123.57.109.30:3006

获取

• 请求方式: GET

• 请求地址: 根域名/api/getbooks

• 请求参数:

不传参获取所有默认书籍, 也可以选择传递下面任意1-多个参数, 获取指定的相关书籍信息

?返回示例

{
  "status": 200, // 状态码200都代表完全成功 - 无任何意义随便写, 只是方便前端写判断条件
  "msg": "获取图书列表成功", // 后台返回的提示消息, 随便写, 只是方便前端直接打印提示消息
  "data": [ // 后台返回的数据
    { "id": 1, "bookname": "西游记", "author": "吴承恩", "publisher": "北京图书出版社" },
    { "id": 2, "bookname": "红楼梦", "author": "曹雪芹", "publisher": "上海图书出版社" },
    { "id": 3, "bookname": "三国演义", "author": "罗贯中", "publisher": "北京图书出版社" }
  ]
}

添加

• 请求方式: POST

• 请求地址: 根域名/api/addbook

• 请求参数:

?返回示例:

{
    "status": 201, // 后台返回数据逻辑层的状态码, 201代表后台已经新增加了一个资源
    "data": {
        "author": "施大神"
        "bookname": "水浒传2"
        "id": 41
        "publisher": "未来出版社"
    }
    "msg": "添加图书成功"
}

1.1-vue使用axios流程

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

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

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

  • import axios from "axios"

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

?

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

<script>
// 目标1: 获取所有图书信息
// 1. 下载axios :  npm i axios
// 2. 引入axios :  import axios from "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-查询图书

?

<template>
  <div>
    <p>1. 获取所有图书信息</p>
    <input type="text" placeholder="请输入要查询 的书名" v-model="bName" />
    <button @click="findFn">点击-查看控制台</button>
  </div>
</template>

<script>
// 目标1: 获取所有图书信息
// 1. 下载axios
// 2. 引入axios
// 3. 发起axios请求
import axios from "axios";
export default {
  data() {
    return {
      bName: '',
    };
  },
  methods: {
    //查询图书
    findFn() {
      axios({
        url: "http://123.57.109.30:3006/api/getbooks",
        method: "GET",
        params: { // 都会axios最终拼接到url?后面
            bookname: this.bName
        }
      }).then(res => {
          console.log(res);
      })
    }
  }
};
</script>

1.3-发布图书

?

<template>
  <div>
    <p>1. 获取所有图书信息</p>
    <input type="text" placeholder="请输入要查询 的书名" v-model="bName" />
    <button @click="findFn">点击-查看控制台</button>

    <div>
      <p>3. 新增图书信息</p>
      <div>
        <input type="text" placeholder="书名" v-model="bookObj.bookname" />
      </div>
      <div>
        <input type="text" placeholder="作者" v-model="bookObj.author" />
      </div>
      <div>
        <input type="text" placeholder="出版社" v-model="bookObj.publisher" />
      </div>
      <button @click="sendFn">发布</button>
    </div>
  </div>
</template>

<script>
// 目标1: 获取所有图书信息
// 1. 下载axios
// 2. 引入axios
// 3. 发起axios请求
import axios from 'axios'
export default {
  data () {
    return {
      bName: '',
      bookObj: {
        // 参数名提前和后台的参数名对上-发送请求就不用再次对接了
        bookname: '',
        author: '',
        publisher: ''
      }
    }
  },
  methods: {
    //查询图书
    findFn () {
      axios({
        url: 'http://123.57.109.30:3006/api/getbooks',
        method: 'GET',
        params: {
          // 都会axios最终拼接到url?后面
          bookname: this.bName
        }
      }).then(res => {
        console.log(res)
      })
    },
    //发布图书
    sendFn () {
      axios({
        url: 'http://123.57.109.30:3006/api/addbook',
        method: 'POST',
        data: {
          appkey: '7250d3eb-18e1-41bc-8bb2-11483665535a',
          ...this.bookObj
          // 等同于下面
          // bookname: this.bookObj.bookname,
          // author: this.bookObj.author,
          // publisher: this.bookObj.publisher
        }
      }).then(res => {
        console.log(res)
      })
    }
  }
}
</script>