巧用 ES6，轻松优化 Vue 代码

对 Web 来说 ES6 是一次重大更新。它引入了许多新功能，解决了 JavaScript 开发者面临的许多痛点。而且它的一些功能特别适合解决开发者使用 Vue.js 时出现的问题。本文会介绍 ES6 的四种有助于 Vue 的功能，探讨这些功能的工作原理，以及它能为你的应用和网站解决哪些问题。

简写方法定义

我要介绍的第一个功能主要是美学层面的改进，但也会明显改善代码的可读性。ES6 引入的这种简写方式能更简洁地为对象分配函数，而分配函数就是我们在 Vue 中为方法、计算属性、观察者和生命周期方法都要做的工作。下面是这个功能应用于 Vue 代码的示例：

// Without shorthand（没有简写）{  methods: {    getValue: function() { // ... }  },  computed: {    halfValue: function() { // ... }  },  created: function() { // ... }}
// With ES6 shorthand（使用ES6简写）{  methods: {    getValue() { // ... }  },  computed: {    halfValue() { // ... }  },  created() { // ... }}

的确，这只是一个很小的改进，但它能为代码可读性带来很大的提升。

解构

解构是 ES6 加入的一项功能，可以更轻松地从对象中提取属性并将其分配给变量。我们先来看一个对象解构的工作原理示例，然后再讨论它在 Vue 代码中的作用：

const person = { name: 'Jake', email: 'jake@example.com', phone: '555-555-5555' }
// With destructuring（使用解构）const { name, email, phone } = person
// Without destructuring（没有解构）const name = person.nameconst email = person.emailconst phone = person.phone

上面的两个例子效果完全一致。使用解构的版本只是简化了代码，用更少的代码达成了相同的效果。

那么如何在 Vue 代码库中使用解构？在 Vue 中主要有两个领域适合做解构：从 this 中解构属性；从作用域插槽接收 prop。下面分别介绍这两个用例。

从 this 解构

在 Vue 中，要引用 Vue 或组件实例上的数据、方法或其他内容要使用 this 方法。但有时访问这些实例属性时用不着重复引用 this。下面是一个很有用的小技巧，可以将属性从 this 中转到你的本地函数作用域内：

data() {  return {    endpoint: 'example.com/api',  }},methods: {  postForm() { // this is just an example method we can call in submitForm }  submitForm() {    // Without destructuring（没有解构）    const endpoint = this.endpoint    const postForm = this.postForm
    // With destructuring（使用解构）    const { endpoint, postForm } = this  }}

这种模式不仅让我们可以不用 this 前缀就使用这些变量，还让我们清楚地知道函数依赖于哪些数据和方法。

作用域插槽

插槽允许我们将模板传递到组件中，而作用域插槽则允许我们的组件向这些模板提供一些组件数据。如果你不太熟悉作用域插槽的话可能会觉得这部分内容没什么用，但我希望这个例子至少可以让读者更清楚解构的工作原理，并了解如何在许多不同的场景中使用这个功能：

<!-- Without Destructuring（没有解构） --><User v-slot="slotProps">  <div>Name: {{ slotProps.name }}</div>  <div>Email: {{ slotProps.email }}</div></User>
<!-- With Destructuring（使用解构） --><User v-slot="{ name, email }">  <div>Name: {{ name }}</div>  <div>Email: {{ email }}</div></User>

相比“从 this 解构”的模式，解构插槽 prop 不仅让我们可以不用 slotProps 前缀就访问变量，还向我们展示了通过插槽接收了哪些属性。

新数组方法

ES6 为数组原型内置的方法引入了许多更新。这些方法允许你以很多不同的方式与数组中的数据交互，例如转换每个元素（map）、排序数组或过滤数组等。我在 Vue 应用中最喜欢的常用数组方法是 filter、map、forEach 和 includes。以下是使用 filter 的示例：

computed: {  // Without "filter" functional array method（不使用数组方法）  oldFilteredItems() {    const filtered = []    for (const item in this.items) {      if(item.value > 10) {        filtered.push(item)      }    }    return filtered  },  // With "filter" functional array method（使用数组方法）  filteredItems() {    return this.items.filter((item) => item.value > 10)  }}

代码一下子从七行减少到了一行！

箭头函数

我们先来看看箭头函数能解决哪些问题，然后再了解它的定义、工作原理以及在 Vue 代码中的用法。看看下面的代码：

data() {  return {    scrolled: false  }},mounted() {  window.addEventListener('scroll', function() {    this.scrolled = true  })}

这些代码并不工作。为什么？因为在创建新函数时，this 的值会重新绑定为等于函数实例而不是 Vue 实例。如果你遇到了这个问题，可使用以下方法来解决：

mounted() {  var self = this  window.addEventListener('scroll', function() {    self.scrolled = true  })}

虽然这确实“修复”了这个问题，但是在你的代码里面到处都是 var self = this 绝对很难看，何况这个问题已经有了解决办法，那就是箭头函数！

箭头函数与标准函数很像，但一个关键区别是箭头函数不会重新绑定 this，这在 Vue 应用中是非常有用的！下面是前面示例的改进版本，其中我们用箭头函数替换了标准函数，因此不会重新绑定 this：

mounted() {  window.addEventListener('scroll', () => {    this.scrolled = true  })}

在编写 Vue 应用时我发现下面这条规则很有用：在 Vue 组件中 this 应始终引用 Vue 实例。用好箭头函数的话这个目标很容易实现，这样你的代码就更容易理解了。

如果你还不熟悉箭头函数，那么绝对应该去好好学一下。一方面它们在上面这个场景中特别有用，此外它们还能让你的函数更简洁，也就适用于更多场景。箭头函数的另一大好处是与数组方法配对！如果你看一下功能 3 中我的 filteredItems 函数，你会发现我使用了一个箭头函数作为 filter 数组方法的第一个参数！

小结

最后我想谈谈我是怎样挑选出这四项改进的，并教大家怎样找出代码库中可以利用改进的地方。下面是一些技巧！

寻找重复内容

不是说所有重复都是不好的，但是在代码中看到任何重复内容都应该想一想有没有可能加入一个好的抽象，或者学习新的模式或语言功能来解决你遇到的问题。

注意语言的变化

如果你没有跟上 JavaScript 的进化脚步，自然就不会知道原来可以使用数组方法简化代码中的许多循环。也就是说，你不必“深入探索”每一种新事物，但要试着去了解你正在使用的语言中到底有哪些功能可用。这样当你遇到问题时就可能想起来某种功能可以解决眼前的问题了。

阅读其他人的代码

如果你是在团队中工作，可以拜托别人审查你的代码，或者去审查别人的代码。查看其他人的代码或看看别人对你写的代码的评论后，你就能了解别人不一样的代码风格。当你看到一个让你看不懂的代码模式时要搞清楚它的具体情况，如果这种模式很有用就把它用到你自己的代码里面。

英文原文：https://blog.logrocket.com/cleaning-up-your-vue-js-code-with-es6/