es6-es11系列7 vue项目中应用es11语法

准备环境

先安装vue-cli脚手架工具 v4.3.1
npm i -g @vue/cli@4.3.1
建议安装两个vscode的插件
vetur 代码提示
eslint 代码检查
免费接口Moke工具
https://jsonplaceholder.typicode.com/
选中页面下面的users https://jsonplaceholder.typicode.com/users

1 使用async/await和解构的方式让代码更简洁，例如

async created(){
    const {data} = await axios.get('https://jsonplaceholder.typicode.com/users')
    this.userList = data
}

2 使用proxy 实现用户列表升序，降序排列，其实这个功能直接用vue的computed也能实现

   async created () {
    // 源数据      
    const { data } = await axios.get('api/getList')
    // 在this下定义代理
    this.proxyData = new Proxy({}, {
      get (target, key) {
        // 当asc属性被获取时执行下面的逻辑，返回一个升序的数组
        if (key === 'asc') {
          // [].concat() 相当于clone了新数组
          return [].concat(data).sort((a, b) => a.name > b.name ? 1 : -1)
        }
        if (key === 'desc') {
          return [].concat(data).sort((a, b) => a.name < b.name ? 1 : -1)
        }
      }
    })
  },
  methods: {
    asc () {
      // 每次按钮点击的时候会获取proxyData下的asc属性
      this.userList = this.proxyData.asc
    },
    desc () {
      this.userList = this.proxyData.desc
    }
  }

3 多图片上传到云存储 阿里云oss

先去阿里的oss申请账号并开通oss服务，因为是后付费，我们把上传完的资源删掉后就不会产生费用了，也没多少钱，放心开通就好。
进入到控制台：https://oss.console.aliyun.com/overview 新建一个Bucket，表达全部使用默认选项即可。
默认上传接口会有跨域限制，可以在Bucket管理中的权限管理-跨域设置中创建一条规则，来源处填入* 来允许任意源
上传后的文件默认是私有阅读权限，访问时会报403错误，所以我们还要在权限管理-读写权限，设置公共读
在项目中安装oss的依赖包 npm i --save ali-oss

初始化sdk的配置

import OSS from 'ali-oss'
// 这两个id在阿里云后台的头像弹出菜单的accesskey管理中去设置
const AccessKey = {
  accessKeyId: 'LTAI5tHyQ1HM3GL213fipXS4jHqc',
  accessKeySecret: 'Y1DAKPpLENN8dfB4wlaJpP1yy4MuvYruE'
}
const client = new OSS({
  // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: 'oss-cn-hangzhou',
  // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
  accessKeyId: AccessKey.accessKeyId,
  accessKeySecret: AccessKey.accessKeySecret,
  // 从STS服务获取的安全令牌（SecurityToken）,我们测试用不上这么复杂，真实的项目需要用这种更安全的方式。
  // stsToken: 'yourSecurityToken',
  // refreshSTSToken: async () => {
  //   // 向您搭建的STS服务获取临时访问凭证。
  //   const info = await fetch('your_sts_server')
  //   return {
  //     accessKeyId: info.accessKeyId,
  //     accessKeySecret: info.accessKeySecret,
  //     stsToken: info.stsToken
  //   }
  // },
  // 刷新临时访问凭证的时间间隔，单位为毫秒。
  refreshSTSTokenInterval: 300000,
  // 填写Bucket名称。
  bucket: 'testosslxf'
})

代码参考：