VUE前端从后台请求过来的数据进行转换数据结构操作

下面详细讲解一下VUE前端从后台请求过来的数据进行转换数据结构操作的攻略。

一、什么是转换数据结构操作

在前端中经常需要从后台请求数据，但是后台返回过来的数据结构不一定符合前端需要的数据结构，因此需要对数据进行转换操作。转换数据结构操作就是将从后台请求过来的数据结构转换为前端需要的数据结构的过程。

二、如何进行转换数据结构操作

VUE前端处理转换数据结构操作主要有两种方式，一种是利用computed计算属性实现，另一种是利用方法实现。

1. 利用computed计算属性实现

computed计算属性是VUE中常用的一种计算属性，可以将计算属性的结果缓存起来，提高渲染效率。利用computed计算属性实现转换数据结构操作的步骤如下：

1. 在VUE实例中定义computed计算属性，计算属性的名称和计算属性的值都可以根据需要进行自定义。

2. 在计算属性的函数中，进行从后台请求的数据转换操作。可以使用ES6中的Array.prototype方法进行数组转换，使用Object.prototype方法进行对象转换。

2. 利用方法实现

除了利用computed计算属性实现，还可以利用方法来实现数据结构转换操作。使用方法的好处是，可以在需要的时候调用，不会进行额外的计算。

实现方法的步骤如下：

1. 在VUE实例中定义方法，方法的名称和方法的返回值都可以根据需要进行自定义。

2. 在方法中，进行从后台请求的数据转换操作。可以使用ES6中的Array.prototype方法进行数组转换，使用Object.prototype方法进行对象转换。

三、示例说明

下面分别介绍用computed计算属性和方法实现数据结构转换的两个示例。

1. 利用computed计算属性实现

<template>
  <div>
    <ul>
      <li v-for="item in computedData">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      originData: [{ id: 1, name: 'Tom' }, { id: 2, name: 'Jerry' }]
    }
  },
  computed: {
    computedData () {
      return this.originData.map(item => {
        return { label: item.name, value: item.id }
      })
    }
  }
}
</script>

以上示例是将originData中的数据结构转换成了前端需要的结构，并将转换后的数据挂载到computedData计算属性上，在页面中直接使用即可。这里通过map方法进行转换操作。

2. 利用方法实现

<template>
  <div>
    <ul>
      <li v-for="item in list">{{ item.label }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      originData: [{ id: 1, name: 'Tom' }, { id: 2, name: 'Jerry' }]
    }
  },
  methods: {
    getList () {
      return this.originData.map(item => {
        return { label: item.name, value: item.id }
      })
    }
  },
  computed: {
    list () {
      return this.getList()
    }
  }
}
</script>

以上示例是将originData中的数据结构转换成前端需要的结构，定义了getList方法进行转换，在computed计算属性中调用getList方法进行数据转换操作，并将转换后的数据挂载到list中，在页面直接使用即可。