作者: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"    })  }}

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

宝藏库 --- 官网文档

Vue 的文档写的是很具体的,毕竟是咱们的人写的,比拟合乎咱们的思考形式,文档中有很多小技巧和资源,其中有个格调指南,肯定要看看。

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


代码部署后可能存在的BUG没法实时晓得,预先为了解决这些BUG,花了大量的工夫进行log 调试,这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

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

交换

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

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