构建Vue.js组件的10个技巧

2019-09-12 admin

1. 组件可以在全局或本地加载

Vue.js提供了两种加载组件的方法:一种在Vue实例全局,另一种在组件级别。两种方法都有其自身的优点。

全局加载组件使其可以从应用程序中的任何模板(包括子组件)访问。它减少了将全局组件导入子组件的次数。

此外,如果全局加载组件,将无法获得Vue注册组件错误–“did you register the component correctly?”。注意,谨慎加载全局组件。它会使您的应用程序膨胀,即使它未被使用,它仍将包含在Webpack构建的初始bundle中。

在本地加载组件使您能够隔离组件并仅在必要时加载它们。与Webpack结合使用时,只有在使用组件时才去延迟加载组件。这使您的初始应用程序文件大小更小,并减少了初始加载时间。

2. 延迟加载/异步组件

使用Webpack的动态导入延迟加载组件。 Vue支持在渲染时和代码拆分时延迟加载组件。这些优化允许您的组件代码仅在需要时加载,从而减少您的HTTP请求,文件大小,并自动为您提供性能提升。关于此功能的重要部分是它适用于全局加载和本地加载的组件。

全局加载异步组件:

本地加载异步组件:

3. 必须的属性

有很多方法可以为组件创建props。您可以传递表示prop名称的字符串数组,也可以传入一个带有键作为prop名称和配置对象的对象。

使用基于对象的方法允许您为单个 prop 修改一些配置,比如设置是否 required。required 的值是true 或 false。如果在使用组件时未设置prop,true将抛出错误,false(默认值)表示不是必须的,不抛出错误。

在共享组件给他人或自己使用时,准确使用 required 配置是很好的,表明这个prop很重要。

4. 使用$emit触发自定义事件

子组件和父组件之间的通信可以通过使用组件内置函数 $emit 发出自定义事件来完成。

$ emit函数接收 事件名称的字符串 和 可选的值两个参数。要监听事件,只需将“@eventName”添加到发出事件的组件中(即子组件使用的地方),然后传入事件处理方法。这是保持单一数据流,并使数据从子组件流向父组件的好方法。

5. 从逻辑上分解组件

说起来容易做起来难,如何根据一个逻辑来划分一个组件?

分解组件的第一种方法是基于数据变化。如果数据在组件的一个部分中不断变化,而在其他部分中不变,那么变化的组件那部分应该单独抽取出来作为独立组件。

原因是如果您的数据/HTML在模板的一个部分中不断变化,则需要检查和更新整个组件。但是,如果将变化的HTML放入其自己的组件中,并使用props传入数据,则只有该组件在其props更改时才会更新。

从逻辑上分解组件的另一种方法是可重用性。如果您拥有在整个应用程序中重复使用的HTML,图形或功能,如按钮,复选框,徽标动画,号召性用语或具有简单更改文本的图形 - 这将是一个很好的候选,抽取到一个新的组件,可以被重用。可重用组件具有易于维护的隐藏优势,因为您只需要更改一个组件,而不必在代码库中找到替换和更改多个地方。

6. 验证您的props

不使用字符串数组来定义props,而是使用允许配置每个prop的对象。两种非常有用的配置项目是“类型”和验证器。

使用类型参数,Vue将自动键入检查您的prop值。例如,如果我们期望一个Number prop但收到一个String,你会在控制台中收到类似这样的警告:

[Vue warn]: Invalid prop: type check failed for prop “count”. Expected Number

对于更复杂的验证,我们可以将函数传递给validator属性,该属性接收 prop值 作为参数并返回true或false。这非常强大,因为它允许我们针对传递给该特定属性的值编写自定义验证。

7. 多个props绑定和覆盖

如果你的组件有多个props,比如说5,6,7或更多,那么连续设置每个prop的绑定可能会变得很繁琐。幸运的是,有一种快速方法可以为组件上的所有属性设置绑定,这就是通过使用v-bind绑定对象而不是单个属性。

使用对象绑定的另一个好处是可以覆盖对象的任何绑定。

在我们的例子中,如果我们在 person 对象中将 isActive 设置为false,那么我们可以对实际person 组件执行另一个绑定,并将 isActive 设置为true而不覆盖原始对象。

8. 修改组件中的props

在某些情况下,您可能希望修改从prop传入的值。但是,这样做会给你一个警告“Avoid mutating a prop directly”,不让直接修改属性。而是使用prop值作为本地数据属性的默认值。这样做将使您能够查看原始值,但修改本地数据不会更改prop值。

有一个好处。使用此方法,您的本地数据属性不会对prop值产生影响,因此对父组件的prop值的任何更改都不会更新您的本地值。但是,如果您确实需要这些更新,则可以使用计算属性组合值。

9. 测试工具中 Mount vs Shallow Mount

在Vue测试工具中有两种方法可以创建和启动组件。一个是mount,另一个是shallow mount。两者都有自己的优点和缺点。

当您想要在组件及其子组件之间进行相互依赖的测试时,mout技术非常有效。允许您测试父组件是否按预期正确地与其子组件交互。相反,正如其名称所暗示的那样,shallow mount技术实例化并仅渲染父组件,而完全隔离而忽略其任何子组件。也就是说,mount会渲染所有父子组件,shallow mount仅仅渲染父组件。因为有时候只需要测试父组件的一些特性。

那么哪种方法更好?随你(由你决定。您选择的策略应取决于您可衡量的目标。试图通过完全隔离来自行测试组件,shallow mount方法效果很好。需要处理具有要确保通信的子组件的组件,那就使用mount。一个很好的选择是同时使用它们。不局限于一个混合搭配,以满足您的测试需求。

10. Vue CLI的力量

Vue CLI 是一个功能强大的命令行界面,允许开发人员快速利用大量可以加快工作流程的功能。

一个我使用很多的功能是,运行 vue serve,后边跟上一个Vue组件的路径。这样做的好处在于,您可以完全开发一个独立的组件,同时也可以对组件进行热重新加载和迭代,无需临时将新组件导入页面进行开发。

在团队工作时,您可能需要提取一个特定组件并与其他组人共享。这就引出了 Vue CLI 的下一个功能:将Vue组件导出为库的能力。调用时,Vue将自动构建单个文件组件,将CSS移动到外部CSS文件(可选,您也可以内联),以及创建 UMD 和 Common .js文件以导入到其他JS项目中。


相关文章:

Vue.js应用性能优化一

Vue.js应用性能优化二

Vue.js应用性能优化三

如何使用Vue.js渲染JSON中定义的动态组件

图片描述

[转载]原文链接:https://segmentfault.com/a/1190000020366326

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74915.html

文章标题:构建Vue.js组件的10个技巧

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
回到顶部