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中文网 !!