在vue中对接口返回数据的处理不希望对返回的数据或对象产生影响。以上将对response本身产生影响，即所谓的侵入式编

思考如何基于Vue对接口返回数据进行处理

为什么要处理数据？

返回的数据通常需要和字典进行映射；
多字段拼接成新的字符串；
不希望对返回的数据或对象产生影响。

let dict = {
    '01': 'a',
    '02': 'b'
}
let response = {
    name: '01'
}
// 此时我们希望页面上展示的是a
function processObj(obj) {
    obj['newName'] = dict[obj['name']]
}
processObj(response)

以上将对response本身产生影响，即所谓的侵入式编程，如果既想达到以上的效果，又不想对原对象产生影响，我们往往需要克隆对象，但在js中，深克隆和浅克隆也可能引发一些问题。

解决方式： 1.深拷贝原对象；

JSON.parse(JSON.stringify(obj))
lodash.deepClone()

2.Vue过滤器

<template>
 <div>
  <h1>{{date | dateFormat}}</h1> 
 </div>
</template>
<script>
 import moment from 'moment';
 import 'moment/locale/zh-cn';
 moment.locale('zh-cn');
 export default {
  data() {
   return {
    date: new Date()
   }
  },
  filters: {
   dateFormat(val) {
    return moment(val).calendar();
   }
  }
 }
</script>

尚未解决疑问： 如果在一个长列表中使用过滤器，是否会造成栈溢出，VUE在内部是否对过滤器机制做了优化？