Vue.js开发的4个基本ES2015特性

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