历史搜索

前端学习:分享20个关于Vuejs的经验总结,良好的建议和最佳实践

游客2024-07-24 10:30:02

 1

(一)安装上Vue

搞Vue开发,没有是不可行的。它是个火狐和浏览器里的扩展,装了它,就可以给你的vue开发带来不尽的便利,不多说,用这个链接去装吧%?=-ntp-icon

(二)组件间通信

vue里面组件间的通信有好几种形式。你可以使用props从上到下地往组件里传递数据,这是一种单向的沟通:


如果你想着在子组件里通知父组件,告诉它某些事情发生了,或某个值发生了变化,可以用子组件发送事件的方式:

...
export default {
 methods: {
 onClick() {
 this.$emit('nameOfEvent', someValue);
 }
 }
}

然后就可以在父级组件里,对这个事件的发生做相应监听和处理:


这里的$emit()发送事件的方法,只能用在/child,也即父级和子级组件之间的通信。

如果你想着实现更复杂的组件间通信,比如两个子级组件之间,不通过父级,如何实现通信呢?这个时候你就可以使用或者vuex。在小中型的应用里,基本上就够用了,如果你并没有特别复杂的组件间状态管理的话。专栏里都讲解10种以上的通信方式,可以看看。

(三)使用VueX来做复杂的状态管理

我们说过模式处理小中型项目够用了,因为它简单直接,但如果你确定要做一个大中型的项目,你的前端应用里有较多数据处理,有很多贯穿整个应用的状态需要共享或处理,那么这个时候,就一般要使用VueX了。

学习和使用VueX的建议:

去学一下VueX里的state, , and 这些概念;研究一下Vuex ,建议如果用VueX,就最好上来就用上VueX ,如果你觉得VueX 繁琐、不值得,那么可能你的应用也没复杂到非得用VueX的地步;学一下如何创建出好的结构,因为VueX默认并没有给你任何限制学一下“”模式是如何运作的可以多参考一下这个Vuex ://.com/vuejs-tips/vuex-(四)代码切割效果

现如今,性能是个热门话题,随着你应用越来越大、越来越复杂,我们得让其越快越好。尽可能地实现代码切割效果,这样可以极大减小你主要的或app文件的体积,因而能提高你应用的初始化时间。

const Loader = () => import(/* webpackChunkName: "aChunkName" */'../path/to/component.vue');

可以像这样来动态引入你的组件,需要的时候再去加载,而不是一下子都加载上。

(五)组件注册的简单方式

传统上,我们喜欢这样来注册vue组件:

import MyAwesomeComponent from './my-awesome-component.vue';
...
components: {
 'my-awesome-component': MyAwesomeComponent
}

这没啥错,但你也可以更简洁一些:

...
components: {
 MyAwesomeComponent,
 MyAwesomeComponentTwo,
 MyAwesomeComponentThree
}

(六)避免将所有组件都注册为全局组件

只有一些基本的组件,你在应用里到处用到,才应该被注册为全局组件,比如说一些/组件。

特定功能的组件,可以引入到其他的组件里,同时可以的话用动态引入,这样可以让你的文件小一些,性能更好一些。

(七)验证props属性

{id="Validateprops"}

当往一个组件里传参时,你最好是立马就进行一些验证,如果没有验证,没有声明一个props应该是什么类型(, Array, ……),那么团队里其他调用你组件的人,他们就不知道该传个啥了,包括你自己,当数据类型发生变化或错误时,你也没有个很好的错误提示了。

(八)

如果你是要做个单页应用(spa),纯前端逻辑的话,那么很可能你会需要用到客户端方面的路由,需要在不同组件之间跳来跳去,这个时候就可以用上,它是vue官方的路由组件。用起来很简单,官方文档在这里//.vuejs.org/。

(九)url变了,但视图没有更新

当在一个SPA里时,你很可能会想着在视图里重复利用一些组件。假设你现在在一个博客文章页面上,然后你想从那个页面跳到另一篇文章上,你会期望相应的内容也改成新的文章的内容,但它却没有变化。

这往往是复用同一个组件的结果,vue还是用了之前的一个实例,这时候组件里this.$route是变了,但是相应的那些生命周期事件,比如(), () 和 (),它们就没有被重新触发。

这个问题,一般有三种解决办法:

要强制vue创建一个新的组件实例,可以在设置一个 key:


或者你也可以设置个watch函数,当route路由变了的时候,就触发相应逻辑:

watch: {
 "$route.params.somevalue": {
 handler(somevalue) {
 // do stuff
 },
 immediate: true
 }
}

或者利用组件自身导航守卫,比如

(十)表单数据验证

当前端有表单时,我们可能会想着在前台页面直接加上验证,这样可以免去非得先往后端验证一下,当然这不是说你后端就不验证了,双重的验证仍是必要的,只是这样可以让前端体验更好更直接一些。

当然了,你没必要自己去处理前端验证的提示和逻辑,已经有这方面很好的组件了,可以试试 或 ,两个都不错,都可以帮你节省不少时间

(十一)好好理解一下vue的生命周期

要想真正发挥出vue的强大,就极其建议你好好理解vue的生命周期。

比方说,如果你想在()下去获取data里的一个值,那么就肯定获取不到;或者,你想在()里去获取一个ref元素,那么你也获取不到,因为这个时候还没有加载DOM元素呢。

关于vue的生命周期,可以看看下面这个完整的图:

(十二)避免直接修改DOM

使用Vue的一个首要原则就是,你不能直接去操作和修改DOM元素,这也是我们用一个像Vue这样的前端框架的目的,就不再像原生js或里那样了。

当然了,你可以用$refs来进行相关操作,这是更简洁更符合vue的方式的做法,这样也更容易日后维护,因为这样你就不需要依赖有着某个特定class或id的元素了。

(十三)进行数据交互

开发中,难免我们需要跟一些外部的服务沟通,来获取或发送数据,比如我们的后端API。

那么最简单的,你可以用浏览器自带的fetch()方法来获取数据,当然这个不一定所有浏览器都支持。

此外呢,建议使用axios组件来做各种数据访问和交互,它在vue和react社区里极其受欢迎。

(十四)列表遍历

vue里面可以用v-for很方便地进行列表遍历:

当你的v-for是用来循环输出一个简单的array时,其中的:key是可以不用指定的,但当你的v-for是用在一个组件上时,也即循环输出某个组件的内容和逻辑时,就必须得加上:key,这样的话,当你列出来的某一个组件逻辑发生变化时,vue才知道到底要去更新列表里的哪一个,所以这个:key就相当于是列表元素的一个辨识符。当然了,你也可以不管v-for的逻辑是否复杂,是否是用在子组件上,你默认都带上:key(始终推荐带上唯一key)。

(十五)计算属性和方法

当你想对vue实例里已有的data数据进行进一步处理时,就可以用计算属性,它的另一个好处是性能有保证,因为计算属性的结果是会被缓存的,只要它所依赖的数据不变,它 就不用来回去计算,不用每次都计算一下。

如果你有个很复杂的计算属性,那么最好的做法时,将其拆分成多个简单的计算属性,这样更容易测试、维护和阅读。

而一个方法,可以理解成是绑定到vue实例上的一个函数,它只有当你明确调用它的时候才执行,就跟一个普通的js或PHP里的方法一样。

(十六)学习和使用

当我们开发应用时,经常会遇到一些功能和逻辑,需要在不同的组件间多次使用,比如同样的方法逻辑,两个组件都要用到,但我们又不想也不应该完全复制两遍,这个时候就该用了。

这意味着,如果我创建了一个组件,它有X个不同的方法、周期逻辑、本地的状态等,我想复用它们,我就可以创建个,让其他的组件扩展这个,就可以在这些新的组件里使用原本它们没有的方法了。

当然是有缺点的,最主要是数据来源不清晰,Vue3.0会废弃使用。

(十七)用上vue自带的修饰符

在不同的场景下,vue有一系列不同的修饰符可以用,在一些场景下用起来还是比较方便的。

表单修饰符

.lazy

.

.trim

事件修饰符

原本我们经常需要用event.()来阻止提交按钮或点击事件的默认动作,但是有了vue的事件修饰符,我们就可以在绑定事件时加上个.stop来阻止单击事件继续传递,用.来阻止表单提交的默认刷新,非常方便,当然还有更多类似的。

.stop

.

.

.self

.once

.

按键修饰符,可以很方便地监听一些按键事件

.enter

.tab

. (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

(十八)好的系统布局和架构

Vue没有给你提供任何默认的系统布局或架构,除非比如说你用Nuxt之类的基于Vue的框架。

所以怎么组织你的应用结构,就取决于你自己了,取决于你的团队了,你们怎么样协商出一个好的、易于理解的应用结构,让所有的团队成员能更好地开展协作。

如果是个私人的小项目,可能不需要太在意这点,但如果是一个大中型的团队项目,那么这一点,将对你们极其重要,一个好的、有意义的系统结构,可以让你们的日常开发事半功倍、相互不牵扯。可以多借鉴后端应用和框架的通行做法,比如模块化,将原本单个的、相互牵扯的应用,开发成一个一个独立的模块,各个模块间相互不影响,只通过有限的途径进行沟通;也可以借鉴后端比较流行的微服务架构,将原本一个庞大的系统,拆分成多个微服务,它们完全独立、不相干,甚至不同的部分都可以用不同的语言、不同的框架。

(十九)做好必要的清理工作

当你在开发一个SPA应用时,如果不留意去移除一些自定义的事件、实例、等,就可能导致应用的内存占用越来越多,最终变得缓慢甚至无法响应。

可以是像类似这个样子:

created() {
 refreshUserLoginTokenInterval(); //开启一个interval来刷新token
},
beforeDestroy () {
 destroyUserLoginInterval(); //在组件销毁前,要记得移除这个interval
}

(二十)往一个元素上添加多个class

添加一个class是很简单的:

//当isError是true时,就加上red这个class

多个class:

// 相应属性为true时,就添加相应class