直播预约通道开启!2021腾讯数字生态大会邀您共探产业发展新机遇! 了解详情
写点什么

巧用 ES6,轻松优化 Vue 代码

2019 年 6 月 05 日

巧用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:419239

评论

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

5 月 28 日 - 29 日阿里云峰会视频云专场直播预告

阿里云视频云

阿里云 音视频

答应我,别再学Swing框架了好吗?

北游学Java

Java spring swing

量化网格策略交易软件,马丁倍投策略机器人

13823153121

低代码实现传统装饰企业的管理跃迁

华为云开发者社区

低代码 华为云 计算 低代码开发 AppCube

活动预告 _ 即构×火山引擎:泛娱乐社交音视频技术实践沙龙

ZEGO即构

字节跳动一年一更的400多页算法刷题宝典已更新,力扣官网沸腾

马小晴

数据结构 面试 算法 Java 25 周年 刷题笔记

2021最快的JavaScript图表LightningChart JS 性能比较

Geek_bacee5

数据可视化 LightningChart.NET LightningChart JS 跨平台图表控件 JavaScript图表库

TcaplusDB | 行业新闻汇编(5月20日)

数据人er

数据库 nosql tencentdb TcaplusDB

webRTC的标准与发展

anyRTC开发者

音视频 WebRTC RTC 实时音视频

【玩转PDF】贼稳,产品要做一个三方合同签署,我方了!

牧小农

JVM

2021 全球技术领导力峰会 融云布道技术领导力进阶之路

融云 RongCloud

博睿数据2021战略发布巡展,开辟IT运维创新路径

博睿数据

博睿数据 数据链DNA 服务可达

获得业内一致好评!华山版Java性能优化全栈手册“登场”

Java架构追梦

Java 阿里巴巴 架构 性能优化 华山版

TcaplusDB小知识之客户端及常用命令

数据人er

数据库 nosql tencentdb TcaplusDB 国产数据库

高可用DevHa实践,告诉你生产环境0性能故障是如何做到的!

数列科技

压测 性能调优 全链路压测 系统稳定高可用 性能压测

Arction图表控件LightningChart.NET如何具有鼠标点跟踪和注释的3D图表

Geek_bacee5

数据可视化 LightningChart.NET Arction 图表控件 鼠标点跟踪和注释的3D图表

鸿蒙轻内核M核源码分析:数据结构之任务排序链表

华为云开发者社区

鸿蒙 数据结构 任务排序链表 双向链表数组 鸿蒙轻内核

现在已经卷到需要问三色标记了吗?

艾小仙

从源码角度研究Java动态代理

叫我阿柒啊

动态代理 代理模式 rmi

并发王者课-青铜7:顺藤摸瓜-如何从synchronized中的锁认识Monitor

技术八点半

Java 多线程 并发

MySQL事务处理特性的实现原理

华为云开发者社区

MySQL 数据库 innodb 事务 隔离

appium 入门参考

37手游iOS技术运营团队

ios 测试 自动化测试 iOS Developer

工业4.0加速实现“数物相合”,可视化工厂节省时效高达85%

一只数据鲸鱼

人工智能 数据可视化 工业互联网 智慧工厂 智能生产

🍃【SpringCloud基础使用】Nacos与Gateway实现动态路由

李浩宇/Alex

nacos SpringCloud Gateway 5月日更 自定义配置

TcaplusDB|世界无烟日,从你我做起

数据人er

数据库 nosql tencentdb TcaplusDB

用图数据库可视化探索 Chia Network 区块链数据

古思为

区块链 可视化 图数据库

职业资格认证是什么?为何Adobe国际认证更新后,会惹起争议

Adobe国际认证

眼观六路耳听八方还不知疲倦?数仓智能运维服务体系是怎么做到的?

华为云开发者社区

数据库 数据仓库 监控 智能运维 数据库监控

接招吧!最强 “高并发” 系统设计 46 连问,分分钟秒杀一众面试者!

不秃顶的Java程序员

Java 程序员 架构 高可用 高并发

用Python在树莓派上播放音乐

IT蜗壳-Tango

5月日更

前阿里P8甩我一份内部SpringCloud笔记手册,真香

周老师

Java 编程 程序员 架构 面试

技术为帆,纵横四海- Lazada技术东南亚探索和成长之旅

技术为帆,纵横四海- Lazada技术东南亚探索和成长之旅

巧用ES6,轻松优化Vue代码-InfoQ