[JavaScript知识库]vue项目按钮loading加载状态

Vue页面如何实现loading效果性能最佳？

在讨论loading效果前，来看看loading有几种应用场景。

页面加载的loading，数据加载的loading，用户操作等待响应的loading三种场景；

页面加载的loading ，从发送浏览器加载页面请求前，展示一个loading 请求在页面最顶层；

一般是旋转的loading图标，gif动图效果，或者采用css动画，旋转一个图片。

等浏览器响应请求，ajax成功回调时，把loading 层隐藏不显示，即结束了loading。

这个时候，页面的骨架html的主要框架渲染到浏览器页面，但是没有数据显示；

接着 进行数据加载的loading 。

页面获取数据，通常需要几个API接口调用后才得到全部业务数据。采用promise 和reject 和then这种同步策略，逐个api接口获取数据，在发起第一个请求前开始loading效果，在最后一个成功返回时结束loading效果。

用户操作等待响应的loading 效果场景是，用户提交表单信息，等待服务器处理数据后返回处理结果，在提交前发起loading效果，服务器返回后结束loading效果。

这几种场景，在Vue的页面生命周期里面如何安排代码，实现性能最佳呢？

首先来看看Vue的生命周期：

1. beforeCreate：

vue实例中的el，data，data中的message都为undefined。

2. created：

el还是undefined，而数据已经与data中的属性进行绑定（放在data中属性当值发生改变的同时，视图也会发生变化），在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。

3. beforeMount：

载入前（完成了data和el数据初始化），但是页面中的内容还是vue中的占位符，data中的message信息没有被挂在到Bom节点中，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。

4. mounted：

载入后html已经渲染(ajax请求可以放在这个函数中)，把vue实例中的data里的message挂载到BOM节点中去。

5. beforeUpdate：

更新前状态（view层的数据变化前，不是data中的数据改变前），重新渲染之前触发，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。

只有view上面的数据变化才会触发beforeUpdate和updated，仅属于data中的数据改变是并不能触发。

6. updated：

数据已经更改完成，dom也重新render完成。

7. beforeDestroy：

销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)。

8. destroyed：

销毁后 （Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件。

生命周期总结

beforecreate : 可以在这加个loading事件 ，页面加载的loading效果；

created ：在这结束页面加载loading；

beforeMount：这里发起后台API请求获取数据的loading效果，在所有请求结束后，结束loading效果；

mounted ： 在这里计算后台获取到的数据，在页面渲染到前端前，对数据进行简单计算处理，例如日期格式化，几个字段相加等，配合路由钩子做一些事情；

beforeDestroy： 你确认删除XX吗？

destroyed ：当前组件已被删除，清空相关内容；

在 methods 属性里面定义 用户提交表单的方法，加入用户交互等待的loading效果。

另外Vue页面中常用的几个属性，通过修改这些属性的值，或者赋值，能完成页面的大部分功能。

el属性 ：用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。

data属性：用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

template属性：用来设置模板，会替换页面元素，包括占位符。

methods属性：放置页面中的业务逻辑，js方法一般都放置在methods中；

render属性：创建真正的Virtual Dom

computed属性：用来计算属性

watch属性：watch:function(new,old){}，监听data中数据的变化，两个参数，一个返回新值，一个返回旧值；
vue全局封装loading教程

<template>

 <div class="loading">

 <van-loading size="36px" vertical>加载中...</van-loading>

 </div>

</template>

<script>

export default {

 props: {},

 data() {

 return {};

 },

 computed: {},

 created() {},

 mounted() {},

};

</script>

<style scoped>

</style>

在app.vue文件中

<loading v-show="isLoading"></loading>

import { mapState } from "vuex";

import loading from "./components/loading";

 computed: {

 ...mapState(["isLoading"])

 },

 components: {

 loading

 },

//css

.loading {

 width: 100%;

 height: 100%;

 left: 0;

 top: 0;

 position: fixed;

 padding-top: 5.333333rem;

}

vuex保存

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

 state: {

 isLoading: false//loading全局开关

 },

 mutations: {

 changeisLoading(state, data) {

 state.isLoading = data

 }

 },

})

export default store

监听接口变化

axios.interceptors.request.use(

 config => {

 // 改变vuex中的isLoading状态数据，当为true，loading显示

 store.state.isLoading = true

 return config;

 },

 error => {

 return Promise.error(error);

 }

);

// 响应拦截器

axios.interceptors.response.use(

 response => {

 // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据

 // 否则的话抛出错误

 if (response.status === 200) {

 //loading隐藏

 store.state.isLoading = false

 return Promise.resolve(response);

 } else {

 return Promise.reject(response);

 }

 },

 error => {

 if (error.response.status) {

 return Promise.reject(error.response);

 }

 }

);