网站首页 > 基础教程 正文
今天,主要分享 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"
})
}
}
这种循环效率更高,计算的属性也只被执行一次,只有依赖的变量变化时才会再次执行。最后,它把逻辑从模板部分分离出来,这样我们的代码就更干净和可读。
宝藏库 --- 官方文档
111
Vue 的文档写的是很详细的,毕竟是我们的人写的,比较符合我们的思考方式,文档中有很多小技巧和资源,其中有个风格指南,一定要看看。
地址:https://cn.vuejs.org/v2/style-guide/index.html
作者:Nwose Lotanna Victor 译者:前端小智 来源:medium 原文:https://blog.openreplay.com/5-useful-vuejs-tips-to-improve-your-building-experience
- 上一篇: 全新web前端开发教程之Jquery事件
- 下一篇: React 与 虚拟DOM
猜你喜欢
- 2024-11-25 React 与 虚拟DOM
- 2024-11-25 全新web前端开发教程之Jquery事件
- 2024-11-25 JQuery 实现简易记事簿
- 2024-11-25 一波Ts 基础大全;领先同事的机会来了
- 2024-11-25 Python教程:报表和日志精讲
- 2024-11-25 「jQuery-3」 获取和设置标签元素
- 2024-11-25 jq中attr 设置checkbox 选中状态中的坑
- 2024-11-25 「B/S端开发」DevExtreme初级入门教程 - 支持TypeScript
- 2024-11-25 jquery常用基础方法
- 2024-11-25 SpringBoot学习笔记八之Admin分配角色权限
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)