Vue生命周期详解

前端大王
379 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

生命周期

  1. 含义：组件从创建到销毁的整个过程，这个过程就是声明周期
  2. 如何知道组件到了什么阶段？（钩子函数）

钩子函数

  1. Vue框架内置函数，随着组件的声明周期阶段，自动执行

  2. 作用：在特定的时间点，执行特定的操作

  3. 分类4大阶段8个方法

阶段方法名方法名
初始化beforeCreatecreated
挂载beforeMountmounted
更新beforeUpdate(DOM的更新前)updated(DOM的更新后)
销毁beforeDestroydestroyed

初始化阶段：

  • beforeCreate

  • created

    1. 可以获取到 data / methods 中的数据
    2. 不能获取真实 DOM
    3. 一般在此处发送 ajax 请求

挂载阶段

  • beforeMount

  • mounted

    1. 可以获取真实 DOM
    2. 当组件执行到此钩子后, 就进入一个稳定状态了, 此时页面也加载完成

更新阶段

  • beforeUpdate

    1. 不能获取更新后的真实 DOM, 但是可以获取更新后的数据

  • updated

    1. 可以获取更新后的真实 DOM

销毁阶段

  • beforeDestroy

    1. 应用场景: 清除全局事件或定时器

  • destroyed

Vue生命周期.png

axios

axios优势

  1. 作用：是一个专门用于发送ajax请求的库

  • 支持客户端发送Ajax请求

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

  • 支持Promise相关用法

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

  • 自动转换JSON数据

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

语法：

 axios({
     url:'请求路径',
     method:'get',
     data: { 'post请求参数'},
     params: { 'get请求参数'}
   }).then(res=>{
     //成功回调
     console.log(res)
   })

事例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <button class="btn1">基本使用</button>
  <button class="btn2">点我发送get请求</button>
  <button class="btn3">点我发送post请求</button>
  <script src="./axios.js"></script>
  <script>
    /*   // axios语法
      axios
        .get('url')
        .then(res=>{'请求成功'})
        .catch = (err=>{'请求错误'})
        .then(()=>{请求完成})
      // 基本使用
      axios({
        url:'请求路径',
        method:'get',
        data: { 'post请求参数'},
        params: { 'get请求参数'}
      }).then(res=>{
        //成功回调
        console.log(res)
      })
     */
     document.querySelector('.btn1').onclick = function () {


     }


    document.querySelector('.btn3').onclick = function () {
      axios({
        url: 'http://www.liulongbin.top:3009/api/login',
        method: 'post',
        data: {
          username: 'admin',
          password: '123456'
        }
      }).then(res => {
        console.log(res)
      })
    }
  </script>
</body>

</html>
avatar
文章
阅读
粉丝