Vue 的这5个技巧,可以大大提高我们的构建体验!

简介: 今天,主要分享 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"
    })
  }
}

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

如果你想开发小程序或者了解更多小程序的内容,可以通过第三方专业开发平台,来帮助你实现开发需求:厦门在乎科技-专注厦门小程序开发公司、app开发、网站开发、h5小游戏开发

相关文章
|
1天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex
|
1天前
|
JavaScript
Vue中的methods、computed计算属性和watch监听属性的使用和区别
Vue中的methods、computed计算属性和watch监听属性的使用和区别
|
1天前
|
JavaScript
vue 页面刷新、重置、更新页面所有数据
vue 页面刷新、重置、更新页面所有数据
|
1天前
|
JavaScript
在Vue中,如何使用`$once`侦听一个事件?
在Vue中,如何使用`$once`侦听一个事件?
5 1
|
1天前
|
存储 JavaScript 前端开发
在Vue中,除了`beforeDestroy`生命周期钩子函数,还有哪些方法可以在组件销毁时清理定时器?
在Vue中,除了`beforeDestroy`生命周期钩子函数,还有哪些方法可以在组件销毁时清理定时器?
7 2
|
1天前
|
存储 JavaScript
Vue中如何在组件销毁时清理定时器?
Vue中如何在组件销毁时清理定时器?
4 1
|
1天前
|
JavaScript 前端开发
在Vue中,如何使用异步组件?
在Vue中,如何使用异步组件?
7 1
|
1天前
|
JavaScript 前端开发
Vue中如何实现组件的按需加载?
Vue中如何实现组件的按需加载?
6 1
|
1天前
|
JavaScript
Vue中的插槽Slot的使用说明
Vue中的插槽Slot的使用说明
7 1
|
1天前
|
存储 JavaScript 数据可视化
vue 虚拟DOM的优劣说明
vue 虚拟DOM的优劣说明
7 2

相关产品

  • 云迁移中心