Vue生命周期与axios

首先解释上一篇的问题

为啥data是个函数呢

那必然是作用域的问题,当多个组件被引用时,就会出现变量污染的情况,使用函数将data定义的变量独立一个作用域出来,这样就能解决变量污染的问题

---

什么是生命周期?

vue实例从创建到销毁的过程

本图摘自vue中文文档

具体解释可参阅vue文档

一.vue钩子函数

概念:vue框架内置函数,随着组件生命周期阶段,自动执行

生命周期钩子函数

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

二.阶段详解

1.vue-初始化阶段

这一阶段发生了什么?

第一步:new Vue() 实例化vue

第二步:Init Events & Lifecycle 初始化事件和生命周期函数

第三步:beforeCreate 生命周期钩子函数被执行

第四步:Init injections&reactivity – Vue内部添加data和methods等(注意:这里可以发现data与methods是在beforeCreate之后添加的,所以beforeCreate是获取不到data或methods里面的变量的)

第五步:created – 生命周期钩子函数被执行, 实例创建

第六步:编译模板阶段 –开始分析

第七步:Has el option? – 是否有el选项 – 检查要挂载到哪里

            没有. 调用$mount()方法

            有, 继续检查template选项

2.vue-挂载阶段

第一步:

template选项检查

有 - 编译template返回render渲染函数

无 – 编译el选项对应标签作为template(要渲染的模板)

第二步:将虚拟DOM挂载成真实DOM之前

第三步:beforeMount 钩子函数被执行

第四步:把虚拟DOM和渲染的数据一并挂到真实DOM上

第五步:真实DOM挂载完毕

第六步:mounted钩子函数被执行(注意:此时才可以获得真实DOM)

3.vue-更新阶段

这一阶段发生在data中的数据改变,更新DOM之前

第一步:beforeUpdata钩子函数被执行

第二步:虚拟DOM重新渲染,打补丁到真实DOM

第三步:updated生命周期钩子函数被调用

循环...

4.vue-销毁阶段

此阶段发生在dom被移除的情况下

第一步: 当$destroy()被调用 – 比如组件DOM被移除(例v-if)

第二步:beforeDestroy – 生命周期钩子函数被执行

第三步:拆卸数据监视器、子组件和事件侦听器

第四步:实例销毁后, 最后触发一个钩子函数

第五步:destroyed – 生命周期钩子函数被执行

二.axios

axios是一个专门用于Ajax请求的库

特点:

• 支持客户端发送Ajax请求

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

• 支持Promise相关用法

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

• 自动转换JSON数据

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

1.基本使用

语法:

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

2.axios-全局配置

axios.defaults.baseURL = "http://XX.XX.XXX..."

3.$refs与原生get id方法

<template>
  <div>
    <p id="uid" ref="rid">我是p标签</p>
  </div>
</template>

<script>
import demo from "./demo.vue";
//ref和$refs的作用:获取组件对象
//在父组件里可以获取子组件对象,直接调用子组件对象里的方法

export default {
  mounted() {
    console.log(document.querySelector("#uid"));
    console.log(this.$refs.rid);
  },
};
</script>

这两种方法都可以获得原生DOM

4.$refs-获取组件对象

利用$refs可以获得子组件内所有的属性与方法,父组件可以直接调用

5.$nextTick

data改变更新DOM是异步的

html中如下代码

<p ref="countP">现在p标签内的值为{{ count }}</p>
<button @click="add">点击递增</button>

 add() {
      //值的变化影响dom是异步的,内部代码为从上至下运行,先执行完当前普通代码,返回当前真实dom内的值,随后真实dom值改变
      //加入this.$nextTick,使代码等待真实dom渲染完毕,再执行内部的代码
      this.count++;
      console.log(this.$refs.countP.innerHTML);
      this.$nextTick(() => {
        console.log(this.$refs.countP.innerHTML);
      });
    },

只有等待真实DOM渲染完毕,才能打印出来

所以$nextTick用于等待异步代码执行完毕,保证执行顺序

---

思考:

1.Vue的nextTick原理

2.页面第一次加载钩子函数执行了几个?

欢迎评论区留言,下期揭晓答案,未完待续...