ES2015(又名ES6)是当前JavaScript语言的规范。如果您是JavaScript新手或者最近没有更新JavaScript知识，那么在ES2015中有许多新特性可以使开发变得更好、更有趣。
如果您是Vue开发人员，那么您将从学习所有这些新特性中获益。但是作为一种分类的方法，您可以从那些专门应用于Vue的特性开始。
在本文中，我将向您展示您将每天使用Vue的四个ES2015功能。我将提供每个的解释和简要示例。
箭头功能
模板文字
模块
解构和扩展语法
1. 箭头功能
箭头函数是一种声明JavaScript函数的新方法。它们提供了更短的语法，但在其他方面也不同于常规JavaScript函数。
// Regular JavaScript function
function(parameters) {
statements
}
// Arrow function
(parameters) = >{
statements
}无约束力 this
箭头函数的一个重要特性是它们不绑定值this。相反，他们使用this封闭的上下文。
考虑需要回调函数的javascript数组方法。例如，array.filter允许您返回一个新数组，只包括那些与回调定义的筛选器匹配的项。
Vue.js的一个重要特性是，您可以this.vueProperty从Vue配置对象的上下文中轻松访问数据属性，计算属性和方法。
但是，如果使用常规函数进行回调，它将为此绑定自己的值。您不能这样引用Vue对象的属性。在回调函数中，必须在回调函数的范围内手动创建vueProperty。
在下面的示例中，size是一个数据属性。在fitlerBySizecomputed属性中，我们需要声明一个变量，size以便可以在filter回调中使用此值：
new Vue({
data: {
size: 'large',
items: [{
size: 'small'
},
{
size: 'large'
}]
},
computed: {
filterBySize() {
let size = this.size;
return this.items.filter(function(item) {
return item.size === size;
// Note: this.size is undefined
});
}
}
});箭头函数使用this封闭上下文中的对象。在这种情况下，它来自filterBySize计算属性，它绑定了Vue对象this，这简化了filter回调：
filterBySize() {
return this.items.filter((item) = >{
return item.size === this.size;
});
}问题
虽然箭头函数可以在许多情况下有效地使用，但这并不意味着我们在开发Vue时应该一直使用它们。实际上，您不应该将箭头函数用作Vue配置对象上的函数属性，因为它们需要从Vue构造函数访问这个上下文。
// Regular function
var regular = new Vue({
data: {
val: 'Hello world'
},
computed: {
upperCase() {
return this.val.toUpperCase();
}
}
});
console.log(regular.upperCase); // HELLO WORLD
// Arrow function
var arrow = new Vue({
data: {
val: 'Hello world'
},
computed: {
upperCase: () = >{
return this.val.toUpperCase();
}
}
});
console.log(arrow.upperCase);
// Uncaught TypeError: Cannot read property 'toUpperCase' of undefined单参数和隐式返回
在某些情况下，您可以使箭头函数语法更加简洁。如果您的函数只有一个参数，则可以删除括号()。如果你的函数中只有一个表达式，你甚至可以删除大括号{}！
这是上面的数组过滤器回调，实现了这些简写：
filterBySize() {
return this.items.filter(item = >item.size === this.size);
}2.模板文字
模板文本使用反引号(` `)而不是双引号或单引号来定义字符串。
模板文字允许我们在Vue.js中做两个超级有用的东西：
多行字符串(非常适合组件模板)
嵌入式表达式(非常适合计算属性)
多行字符串
在JavaScript代码中编写模板并不理想，但有时我们需要/需要。但是如果模板有很多内容呢？在ES2015之前，我们有两种选择：
首先，把它全部放在一行：
Vue.component({
template: '<div><h1>{{ title }}</h1><p>{{ message }}</p></div>'
});当线路变长时，这真的很难读。
第二个选项:让它多行。由于JavaScript字符串是如何解析的，您需要在每一行的末尾断开字符串，然后用+将其重新连接起来。这使得模板更难编辑:
Vue.component({
template: '<div>' + '<h1>{{ title }}</h1>' + '<p>{{ message }}</p>' + '</div>'
});模板文字解决了这个问题，因为它们允许多行字符串，而不需要字符串被分割:
Vue.component({
template: ` < div > <h1 > {
{
title
}
} < /h1>
<p>{{ message }}</p > </div>`
});内嵌表达式
有时我们希望字符串是动态的，即包含一个变量。这在计算属性中非常常见，您可能希望在模板中插入一个字符串，该模板派生自一个反应性Vue.js数据属性。
使用常规字符串，我们必须将字符串拆分，以插入一个变量并将其与+连接起来。同样，这使得字符串难以阅读和编辑:
new Vue({
data: {
name: 'George'
},
computed: {
greeting() {
return 'Hello, ' + this.name + ', how are you?'
}
}
});通过在模板文字中使用占位符${}，我们可以插入变量和其他表达式而不破坏字符串:
new Vue({
data: {
name: 'George'
},
computed: {
greeting() {
return`Hello,
$ {
this.name
},
how are you ? `
}
}
});阅读有关MDN上模板文字的更多信息。
3.模块
如何将JavaScript对象从一个文件加载到另一个文件中？在ES2015之前没有本地方法可以做到这一点。使用JavaScript 模块，我们可以使用导出和导入语法来完成：
file1.js
export
default {
myVal:
'Hello'
}file2.js
import obj from './file1.js';
console.log(obj.myVal); // Hello模块有两个主要好处:
我们可以将JavaScript应用程序分成多个文件
我们可以使某些代码跨项目重用
组件模块
模块文件的一个很好的用例是组件。在ES2015之前，我们需要将所有组件定义放在主文件中，包括我们的Vue实例，例如
app.js
Vue.component('component1', {...
});
Vue.component('component2', {...
});
Vue.component('component3', {...
});
new Vue({...
});如果我们继续这样做，我们的app.js文件将变得非常大和复杂。使用模块，我们可以把我们的组件定义放在单独的文件和实现更好的组织，例如:
component1.js
export default {
// component definition
};我们现在可以导入组件定义对象现在在我们的主文件:
app.js
import component1 from './component1.js';
Vue.component('component1', component1);
...模块化组件的更好选择是使用单文件组件。这些工具使用JavaScript模块，但也需要像Webpack这样的构建工具。
要阅读有关JavaScript模块的更多信息，请从导入功能开始。
4. 析构和扩展语法
对象是Vue.js开发的重要组成部分。通过一些新的语法特性，ES2015使处理对象属性变得更加容易。
解构的任务
解构允许我们解包对象属性并将它们分配给不同的变量。采取以下对象myObj。要将其属性分配给新变量，我们使用.符号：
let myObj = {
prop1: 'Hello',
prop2: 'World'
};
const prop1 = myObj.prop1;
const prop2 = myObj.prop2;使用析构赋值，我们可以做得更简洁:
let myObj = {
prop1: 'Hello',
prop2: 'World'
};
const {
prop1,
prop2
} = myObj;
console.log(prop1);
// Output: Hello解构在Vuex操作中很有用。Actions接收一个context对象，该对象包含对象的属性state和commitAPI方法：
actions: {
increment(context) {
// context.state
// context.commit(...)
}
}但是，通常情况下，您不需要state动作中的属性，只想使用commitAPI。通过在函数配置文件中使用解构赋值，您可以创建一个commit在主体中使用的参数，从而减少此函数的详细程度：
actions: {
increment({
commit
}) {
commit(...);
}
}传播的语法
扩展语法允许我们将对象扩展到期望多个键/值对的位置。要在2015年之前将信息从一个对象复制到另一个对象，我们必须这样做：
let myObj = {
prop1: 'Hello',
prop2: 'World'
};
let newObj = {
name: 'George',
prop1: myObj.prop1,
prop2: myObj.prop2
};
console.log(newObj.prop1); // Hello使用扩展运算符…，我们可以做得更简洁:
let newObj = {
name: 'George',
...myObj
};
console.log(newObj.prop1); // Hello再次以Vuex为例，我们通常希望使用Vuex状态属性作为计算属性。在es2015之前，我们必须手动复制每一个。例如:
store.js
new Vuex.Store({
state: {
prop1: ...,
prop2: ...,
prop3: ...
}
});app.js
new Vue({
computed: {
prop1() {
return store.state.prop1;
},
prop2() {
return store.state.prop2;
}...
}
});Vuex提供mapState函数，该函数返回一个对象，该对象具有您通过提供其键指定的所有Vuex状态属性:
import {
mapState
}
from 'vuex';
var state = mapState(['prop1', 'prop2', 'prop3']);
console.log(state.prop1) // { ... }使用mapState和spread操作符，我们可以用一种非常简洁的方式将本地计算的属性与Vuex中的属性结合起来:
app.js
import {
mapState
}
from 'vuex';
new Vue({
computed: {
someLocalComputedProp() {...
},
...mapState(['prop1', 'prop2', 'prop3'])
}
});以上是您将在Vue项目中直接使用的ES2015功能。当然，还有许多其他ES2015功能在Vue.js编程中很有用。如果您想继续学习，我建议将这两个作为您的下一个主题：
承诺。这些有助于异步编程，可以与异步组件以及Vuex操作一起使用。
Object.assign。这不是您经常需要的，但它可以帮助您了解Vue的反应系统是如何工作的。Vue.js 3.x可能会使用新的Proxies功能，所以请检查一下！
英文原文地址：https://vuejsdevelopers.com/2018/01/22/vue-js-javascript-es6/
更多web开发知识，请查阅 HTML中文网 ！！