大大提高我们的构建体验5个 Vue 技巧

作者:Nwose Lotanna Victor
译者:前端小智
来源:medium

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

今天,主要分享 Vue 的 5个技巧,来提高项目的构建速度。

使用可读的命名规范

这一点你可能已经听说过了,可读性真的很重要,特别是多人合作的项目。以下是一些被认为是最佳做法的建议。

命名组件时使用驼峰

  • NewComponent.vue ✅
  • newcomponent.vue 🛑
  • Newcomponent.vue 🛑

**如果有子组件,可以这样命名

  • FooterSection.vue
  • FooterSectionHeading.vue
  • FooterSectionIcons.vue
  • FooterSectionButton.vue

如果没有子组件,可以尝试加前缀 the 来命名

  • TheNavbar.vue

验证 Props 的数据类型

Prop 是父子组件数据通讯的重要方式,然而,重要的是,创建 Prop 时,明确指定数据类型并对传入的数据进行验证,可以帮助避免我们在开发阶段由于类型不一致导致的 Bug。

我们新手可能时不时会经常这样写 prop:

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

但是,通常你希望每个 prop 都有指定的值类型。这时,你可以以对象形式列出 prop,这些 property 的名称和值分别是 prop 各自的名称和类型:

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

这不仅为你的组件提供了文档,还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。

不要直接操作DOM

从早期用 JQ 过来的同学,在用 Vue 时有部分人还是很喜欢直接操作DOM,这并不是坏事,不过 Vue 使用虚拟DOM,这是一个抽象的DOM版本,使编译更有效,避免在每次变化时重新渲染整个DOM。这一点在很大程度上提高了效率和资源管理,因为DOM API被调用的频率较低。这意味着,我们并不真的需要在组件中做这样的事情。

<input type="checkbox" @change="logStatus" />

如果要根据上面的 checkbox 状态做一些事情,我们可能会这样做:

methods: {
  logStatus() {
    const isOn = document.getElementById('thecheckbox').checked;
    if( isOn ) {
      console.log('Light is on');
    } else {
      console.log('Light is off');
    }
  }
}

getElement 是DOM API,如果用下面这种方式来代替,效率会提高。

data() {
  return {
    isOn = false
  }
},
methods: {
  logStatus() {
    if(this.isOn) {
      console.log('Light is on');
    } else {
      console.log('Light is off');
    }
    this.isOn = !this.isOn;
  }
}

不需要用 DOM API,这也可以达到同样的效果。无论你能用纯JS做什么,都有可能在虚拟DOM中找到更有效的方法,如果你找不到,请使用 Vue Refs

拥抱计算属性

计算属性是减少复杂逻辑的一个很好的方式,比如,在我们的条件表达式很长的时候就很可以用计算属性,简化成一个变量,可以大大的提高可读性,也避免给后面维护的人留坑。

<div v-for=’car in cars’ v-if=’car.country =="Germany"' >

我们可以使用v-for来循环浏览列表,有些人会像上面那样使用 v-if 来做条件或过滤。这看起来不错,但是,Vue的编译器优先考虑 v-for 而不是 v-if,所以最后的结果可能不是我们想要的,列表(想象它有100万个)将被每次循环,这样一点都不高效,我们可以使用计算属性改善这一问题。

<div v-for='car in countryFilter'>
//....
computed: {
  countryFilter: () => {
    return this.cars.filter(function (car) {
      return car.country =="Germany"
    })
  }
}

这种循环效率更高,计算的属性也只被执行一次,只有依赖的变量变化时才会再次执行。最后,它把逻辑从模板部分分离出来,这样我们的代码就更干净和可读。

宝藏库 --- 官方文档

image.png

Vue 的文档写的是很详细的,毕竟是我们的人写的,比较符合我们的思考方式,文档中有很多小技巧和资源,其中有个风格指南,一定要看看。

地址:https://cn.vuejs.org/v2/style...


代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

原文:https://blog.openreplay.com/5...

交流

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。


终身学习者
我要先坚持分享20年,大家来一起见证吧。
66.4k 声望
104.7k 粉丝
0 条评论
推荐阅读
总结一些,书写 CSS 的时候,经常犯的错误!
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智1阅读 432

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.9k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan41阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
66.4k 声望
104.7k 粉丝
宣传栏