GMTC北京站9折购票倒计时,部分日程已上线,戳此查看 了解详情
写点什么

巧用 ES6,轻松优化 Vue 代码

  • 2019 年 6 月 05 日
  • 本文字数:2823 字

    阅读完需:约 9 分钟

巧用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/



2019 年 6 月 05 日 17:419521

评论

发布
暂无评论
发现更多内容

【Vue2.x 源码学习】第二十五篇 - 数组依赖收集的原理

Brave

源码 vue2 8月日更

【网络安全】渗透工程师面试题总结大全

网络安全学海

面试 网络安全 信息安全 渗透测试 漏洞

NLP随笔(四)

毛显新

自然语言处理 神经网络 深度学习

面试官:JVM的运行时数据区了解不?

杜少雄

Java JVM JVM、 8月日更

「SQL数据分析系列」16. 分析函数

数据与智能

sql 函数 分析

【Maven 入门教程】2、Maven 常用命令及项目骨架生成

村雨遥

Java maven 8月日更

藏在煤箱中的文明:一个会说话的箱子能告诉我们什么?

脑极体

SpringBoot 整合 Drools

LeifChen

drools springboot 规则引擎 8月日更 业务规则

试错,然后成长

escray

学习 极客时间 朱赟的技术管理课 8月日更

刷完这套200+大厂Java真题手册,成功拿到阿里,京东,美团的offer

Java 编程 架构 面试 架构师

读书日送书丨关于音视频技术你需要知道的二三事

声网

人工智能

Kong-To-APISIX:减轻你的迁移压力

Apache APISIX 中国社区

开源 网关 kong APISIX

【设计模式】单例模式

Andy阿辉

编程 程序员 后端 设计模式 8月日更

Linux 环境如何使用 kill 命令优雅停止 Java 服务

陈皮的JavaLib

Java Linux 面试 springboot 8月日更

【翻译】数据包的旅程 - 主机之间通信

luojiahu

计算机网络 OSI模型

为了进阿里,我通宵达旦三个月,学了这些技术点(附Java思维导图)

Java 编程 架构 面试 架构师

Gin 介绍

xcbeyond

Go 语言 gin 8月日更

Dremio 推出在 AWS 云上运行的数据湖服务

水滴

数据湖 8月日更 Dremio

使用 Sequelize 快速构建 PostgreSQL 数据的 CRUD 操作

devpoint

node.js postgresql API 8月日更

小技巧 | Get 到一个 Web 自动化方案,绝了!

星安果

chrome 自动化 Web 插件 chrome扩展

Nacos注册中心之概要设计

捉虫大师

微服务 nacos 服务发现

【前端 · 面试 】HTTP 总结(四)—— HTTP 状态码

编程三昧

面试 大前端 HTTP 8月日更

阿里人,五年心血汇聚而成这份Spring Cloud Alibaba开发手册

Java架构师迁哥

趁着课余时间学点Python(三)变量,基本数据类型,运算符

ベ布小禅

8月日更

等待时间的忍受度

箭上有毒

8月日更

当一只「无头苍蝇」又何妨?

非著名程序员

读书笔记 提升认知 个人提升 8月日更

Error SHA256 mismatch

一个大红包

8月日更

Vue进阶(五):与 Vuex 的第一次接触

No Silver Bullet

Vue vuex 8月日更

数据缓存历险记(二)--被过期键经理上了一课

卢卡多多

redis Redis键过期监听 8月日更

巧用ES6,轻松优化Vue代码_语言 & 开发_Jake Dohm_InfoQ精选文章