Vue中的计算属性和axios基本使用回顾

Vue中的计算属性和axios基本使用是Vue框架中非常常用的两个功能，下面将为您详细讲解。

一、计算属性

1. 什么是计算属性

计算属性是Vue中的一个特殊属性，它可以对已有的数据进行计算后返回一个新的值，类似于计算机科学中的“函数”。计算属性本质上是一个“函数”，它的返回值会被缓存，只有依赖的变量发生改变时才会重新计算。

2. 计算属性的用法

计算属性的语法如下：

<template>
  <div>
    <p>原始值: {{ message }}</p>
    <p>计算属性: {{ computedMessage }}</p>
    <button @click="changeMessage">修改 message</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  computed: {
    computedMessage() {
      return this.message.toUpperCase()
    }
  },
  methods: {
    changeMessage() {
      this.message = 'hello vue'
    }
  }
}
</script>

上述代码中，我们定义了一个计算属性computedMessage，它会将message的值转换成大写并返回。因为computedMessage依赖于message，所以只要message的值发生改变，computedMessage的值也会随之更新。在模板中，我们用{{ computedMessage }}来显示计算属性的结果。

3. 计算属性的优点

计算属性的优点是：
- 可以使模板更简洁，避免在模板中写复杂的逻辑。
- 计算属性会缓存结果，提高计算效率，避免多次计算不必要的值。

二、axios基本使用回顾

1. 什么是axios

axios是一个基于Promise的HTTP库，可以用来发送HTTP请求和处理响应数据。它支持浏览器和Node.js，并提供了并发请求的接口，可以对请求和响应的数据进行拦截和转换，还可以取消请求。

2. axios的基本用法

• 在Vue项目中安装axios：npm install axios --save

• 在Vue组件中使用axios：

import axios from 'axios'

axios.get('/api/getUser').then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

上述代码中，我们用axios发送了一个GET请求到/api/getUser接口，成功时打印出响应数据，失败时打印出错误信息。axios返回的是一个Promise对象，可以使用.then()和.catch()方法来处理请求结果。

• 使用axios的拦截器

import axios from 'axios'

//请求拦截器
axios.interceptors.request.use(config => {
  // do something before request is sent
  return config;
}, error => {
  // do something with request error
  return Promise.reject(error);
});

//响应拦截器
axios.interceptors.response.use(response => {
  // do something with response data
  return response.data;
}, error => {
  // do something with response error
  return Promise.reject(error);
});

axios.get('/api/getUser').then(response => {
  console.log(response)
}).catch(error => {
  console.log(error)
})

上述代码中，我们在请求和响应时分别使用了拦截器。请求拦截器可以在请求发送前对请求做一些处理，比如添加请求头或请求参数等；响应拦截器可以在获取到响应数据后对数据进行处理，比如格式化数据或解密数据等。拦截器的返回值会影响后续的请求或响应，可以对其进行修改、新增或删除等操作。

总结

本文分享了Vue中的计算属性和axios基本使用。计算属性可以用来对已有的数据进行计算，从而简化模板中的逻辑；axios可以用来发送HTTP请求和处理响应数据，可以对请求和响应的数据进行拦截和转换。尽管我们只是简单介绍了这两个功能的基础用法，但相信可以为您在实际项目中的应用提供一些参考。