一、初始化环境
我们既然要研究ES新特性在Vue中的应用，那我们就需要一个vue的开发环境，我们可以用脚手架工具安装来帮助我们。
首先确定我们是否安装了node。可以通过node -V查看node的版本。
我们也可以手动安装一个nvm,用来管理我们的node环境，可以用来切换node版本。在开发中，我们可能对node版本频繁进行切换。所以，nvm必不可少。
下面我们正式来安装vue脚手架。执行如下命令。@后是我们脚手架工具的版本号。我们安装是4.3.1
通过vue create name创建项目。
执行上述命令后会进入如下页面内。这是我们对项目的一些配置。这个页面内是选择我们的项目是基于vue2还会vue3。我们这里选择最后一项手动设置，上下键可以切换选择，回车进入下一步
进入如下选项内，在这里我们选择自己所需要的，空格可以选中和取消选中，这里我们在选一个Router,其他的在我们项目内暂不需要。回车进入下一步
这一步是选择我们项目的vue版本，这里我们选择vue2。回车进入下一步
是否选择历史模式路由。我们yes。回车进入下一步
选择eslint，我们选择第三个，回车下一步
什么时候检查eslint,选择第一个，保存时检查。回车下一步
Babel,eslint等而配置是单独的文件还是放在package.json内。我们选择第一个，回车下一步
是否保存上述配置为以后的项目使用，我们no,回车下一步
进入到如下页面，初始化项目中，
安装成功
我们可以进入到项目文件内，把项目跑起来，
启动成功
我们可以初步看一眼，就会找到很多ES新特性应用的地方。当然这些都是耳熟能详的小知识点。别入说下面，import、export default、键和值名字一样写一个就可以，按需引入，这都是ES的新特性在vue中的使用。
二、ES新特性在数据交互中的应用
假设我们有如下需求，需要在我们的首页显示用户信息，后端已经写好接口。我们需要把数据显示到页面上。这里我们用JSONplaceholder mock数据。具体代码如下（只展示具体实现部分代码） 实现效果
其实上边的代码我们还可以用其它新特性来改写
我们还可以继续优化上边的代码，可以用结构赋值更好的处理。本来数据内还有其它数据，我们可以直接通过解构赋值来直接获取我们想要的那部分数据
一个简简单单的请求就涉及到这么多的ES新特性，所以掌握ES新特性是必要的。
三、Proxy在vue中的应用
上边的代码我们将用户名字展示在页面上，那么我们想对名字进行升序，降序，重置的操作，那么应该如何实现呢，我们之前学习过Proxy，他可以对数据进行代理操作。下面就让我们看一下是如何实现的。
上边的代码就是proxy在vue中的应用，但是你会发现，其实是存在问题的，因为重置按钮并不好用，原因其实就是sort这个方法，sort方法会改变原数组。所以data一直在改变。所以我们需要修改一下上边的代码。
四、图片上传逻辑与阿里云oss使用
4.1 图片上传逻辑
我们在这里主要就是实现一个应用场景，就是多图片上传，这个在开发中其实是非常常见的需求。下面就让我们开始吧，首先我们先实现基本的功能样式，代码如下：
multiple设置可以上传多张图片
效果如下：
从代码来看，这里用了一个通用的小技巧就是用label标签的特点帮我们去控制input上传，这是因为我们直接用input时，不能定制我们的样式。我们用label标签指向input的id。之后input标签隐藏起来就可以任意定制我们所需要的样式了。但是这时就需要我们自己对图片进行校验了，代码如下：
首先，我们可以将我们获取的上传文件信息打印出来，在这个过程中我们用到了ES新特性：可选链。
我们用上述结果中的length和size就可以对图片进行校验了
之后我们就可以把fileList上传到oss了。
4.2 阿里云oss的使用
首先我们要先开通阿里云oss服务阿里云
点击注册，之后登录我们的账号，可以阿里系产品扫码或者手机号注册，选择自己喜欢的方式即可。
之后搜索OSS,我们可以看到OSS对象存储，点击进入如下页面
之后我们可以进行购买，首先你一定要知道价格是如何计算的，你可以查看相关文档或者咨询客服小姐姐。 购买之后，进入如下页面
当我们想进行上传时，我们点击右侧的bucket进行创建，根据需要进行配置，我这了去了名字其余都默认，点击确定
之后我们就可以回到我们的代码内进行上传了
我们首先需要安装一下oss的npm包
之后我们需要在项目中引入和使用
- region就是下图部分
- bucket就是我们创建bucket的名字
- accessKeySecret、accessKeyID可以通过下图进行查看。这个我们不要轻易告诉别人，以防别人恶意上传。
上述配置好我们就可以接着进行了
我们声明一个upLoadFileByOss函数进行上传相关操作，OSS下put需要两个参数，第一个参数是参数名，需要注意的是参数名不能重复，如果重复前面的就会被覆盖。
上述代码我们操作后会发现报错了，原因是跨域问题，这需要在OSS上配置一下
上边的代码就已经可以正常上传了，同时我们需要将上传的图片在前端展示出来，代码如下
上述代码我们写完仍然发现，上传完图片没有正常显示出来，原因是权限问题，从报错信息403我们也可以看出这一点。我们需要将下述权限设置为公共读，这样我们就可以正常看到图片了
此时我们还需要考虑的一点是，我们在上传过程中时，不应该继续操作上传，应该等完成之后在操作，那我们就可以在上传中时禁用上传按钮，完成之后在更新这个状态。要完成上述需求，你是不是会想到Promise.all这个方法呢？
下面代码实现我们的需求
不知道细心地你有没有发现，上传图片的顺序是否和我们点击的顺序一致呢？答案是否定的，如下我们按照1 2 3 4上传，可以看到其实是按照3 2 4 1的顺序完成的
也就是说在下面的这个地方，我们是无法控制谁先完成上传的，那么哪里可以有顺序呢，没错Promise.all内的返回结果是有顺序的
根据上述结果我们可以改写我们的代码，
虽然Promise.all解决了我们的问题，但是，你是不是还的Promise.all的弊端呢？是否还记得什么方法可以解决这个弊端呢？
promise.all当遇到错误时，会立即停止，不再继续执行，这显然无法满足我们的要求，所以Promise.allSettled就会被我们想起
至此，我们就彻底完成了我们图片上传部分的代码,下面是完整代码
在对于以上代码，我相信有认识会有更加优雅的写法，提到优雅二字，我想你肯定想到了async、await。没错，async/await确实可以改写我们的代码，代码如下
4.3 总结
这一部分我们应用了很多的ES新特性，可选链，async/await、Promise、Promise.all、Promise.allSettled等等。我们会发现，这些新特性极大地方便了我们的工作，对一些场景我们可以直接使用，解决我们的问题。所以，ES新特性的掌握是有必要的。
