Vue.js专家解释了如何在使用Vue框架进行编码时使用JavaScript的最新功能。请继续阅读！
ES2015（又名ES6）是JavaScript语言的当前规范。如果您是JavaScript新手或最近没有更新JavaScript知识，ES2015中有许多新功能可使开发更好，更令人愉快。
如果您是Vue开发人员，您将从学习所有这些新功能中受益。但作为一种分类手段，您可以从适用于Vue的那些功能开始。
在本文中，我将向您展示您将每天与Vue一起使用的四个ES2015功能。我将提供每个解释和简要示例。
箭头功能
模板文字
模块
解构和扩展语法
1.箭头功能
// Regular JavaScript function
function(parameters) {
statements
}
// Arrow function
(parameters) => {
statements
}
没有界限 this
箭头函数的一个重要特性是它们不绑定值this。相反，他们使用this封闭的上下文。
考虑需要回调函数的JavaScript数组方法。Array.filter例如，允许您返回一个新的数组，只包含那些与回调函数定义的过滤器相匹配的项目。
Vue.js的一个重要功能是，您可以轻松访问this.vuePropertyVue配置对象上下文中的数据属性，计算属性和方法。
但是，如果您使用常规函数进行回调，它将为其自己的值绑定this。您不能this.vueProperty从回调中引用Vue对象的属性，您必须在回调的范围内手动创建它们。
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封闭上下文中的对象。在这种情况下，它来自filterBySizeVue对象绑定到的计算属性，该属性this简化了filter回调：
filterBySize() {
return this.items.filter((item) => {
return item.size === this.size;
});
}
疑难杂症
虽然箭头函数可以在很多情况下有效地使用，但这并不意味着我们应该在开发Vue时始终使用它们。事实上，你不应该在Vue配置对象上使用箭头函数作为函数属性，因为它们需要this从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
单参数和隐式返回
在某些情况下，您可以使箭头函数的语法更加简洁。如果您的功能只有一个参数，则可以删除括号()。如果你的函数只有一个表达式，你甚至可以放下大括号{}！
下面是从上面实现的那些shorthands的数组过滤器回调：
filterBySize() {
return this.items.filter(item => item.size === this.size);
}
2.模板文字
模板文字使用反引号（``）而不是双引号或单引号来定义字符串。
模板文字允许我们在Vue.js中做两件超级有用的事情：
多行字符串（非常适合组件模板）。
嵌入表达式（很适合计算属性）。
多行字符串
用JavaScript代码编写模板并不理想，但有时我们需要/需要。但是如果模板有很多内容呢？在ES2015之前，我们有两个选择：
首先，把它放在一条线上：
Vue.component({
template: '
{{ title }}
{{ message }}
'
});
线路变长时，这真的很难读懂。
Vue.component({
template: '
' +
'
{{ title }}
' +
'
{{ message }}
' +
''
});
模板文字解决了这个问题，因为它们允许多行字符串而不需要分割字符串：
Vue.component({
template: `
{{ title }}
{{ message }}
`
});
嵌入式表达式
有时我们想要一个字符串是动态的，即包含一个变量。这在计算属性中非常常见，您可能希望在从反应的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?`
}
}
});
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操作中很有用。操作接收context包含state对象和commitAPI方法属性的对象：
actions: {
increment (context) {
// context.state
// context.commit(...)
}
}
不过，通常情况下，您不需要操作中的state属性，只需要使用该commitAPI。通过在函数配置文件中使用解构赋值，可以创建一个commit用于正文的参数，从而减少此函数的详细程度：
actions: {
increment ({ commit }) {
commit(...);
}
}
不过，通常情况下，您不需要操作中的state属性，只需要使用该commitAPI。通过在函数配置文件中使用解构赋值，可以创建一个commit用于正文的参数，从而减少此函数的详细程度：
actions: {
increment ({ commit }) {
commit(...);
}
}
扩展语法
在传播语法允许我们展开的对象为在多个键/值对预期的地方。要将信息从一个对象复制到另一个对象之前，我们必须这样做：
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与传播结合运营商，我们可以与那些在一个非常简洁的方式从Vuex结合本地计算性能：
app.js
import { mapState } from 'vuex';
new Vue({
computed: {
someLocalComputedProp() { ... },
...mapState(['prop1', 'prop2', 'prop3'])
}
});
这很酷！还有什么？
以上是您将立即在Vue项目中使用的ES2015功能。当然，还有很多其他的ES2015功能在Vue.js编程中很有用。如果你想继续从这里学习，我会建议这两个作为你的下一个主题：
承诺。这些有助于异步编程，可以与Async Components以及Vuex Actions一起使用。
Object.assign。这不是你经常需要的东西，但它会帮助你理解Vue的反应性系统是如何工作的。Vue.js 3.x可能会使用新的Proxies功能，所以请检查一下！