关于 Vue.js:那些好的,不怎么样的和糟糕的

简介:

使用新的框架和库总是会让人兴奋,但也有压力。即使经过一些评估,你也永远不会知道你将会碰到什么样的意外情况。

在几乎每天使用 Vue 大约两年后,我和它的蜜月期结束了,我终于可以从一些角度来写点什么了。

Tips:以下纯属个人观点。

5e379bd68065a0dd25a72c2444d433d999001cf6

好的方面

响应性(Reactivity)

数据绑定在前端领域是个大问题。现在我们更专注于数据,而不像使用 jQuery 一样对 DOM 进行微观管理。Vue 通过双向响应数据绑定系统巧妙地处理这个问题。

为实现这种响应性,Vue 为状态中的每个变量添加了许多 getter 和 setter ,以便它可以跟踪更改并自动更新 DOM 。这种方法并不完美,我们稍后会再提到。

高可用性(Batteries included)

使用 Vue ,你无需使用 MobX 或 React Router 等非官方软件包来处理应用程序的关键部分。Vue 提供了 Vue Router 和 Vuex 。这些都是很好的库,而且是为 Vue 量身定制的。

速度

Vue 非常快。它也许不是最快的,但它的性能表现对绝大多数 Web 项目来说都是顶级的。你上一次需要每秒渲染和更新数千个 DOM 元素是什么时候?

HTML 模板

这是在 JavaScript 开发者中具有争议性的一个话题。无论你喜欢还是不喜欢,HTML 模板已经在许多语言中进行了数十年的实战打磨,并且是在 Vue 中编写动态标记(dynamic markup)的首选。

此外,Vue 也支持 JSX 。

其他

 ●  HTML、CSS 和 JavaScript 的单个文件组件。
 ●  轻量。大约 20KB(gzip)。
 ●  高可扩展(mixins、插件等)。
 ●  文档完善(除了下面提到的一些例外)。
 ●  可逐步采用,甚至用作 jQuery 的替代品。
 ●  易于上手。

呃……不怎么样的

组件模板(Component boilerplate)

从 React 迁移到 Vue ,我似乎有感受到一股清新空气,不再到处 bind(this) 或 setState()。好极了!但过了一段时间,我开始质疑 Vue 组件语法的有效性。

Vue 组件是使用对象创建的,这是定义组件函数的示例:

589f6d2d6f23bd0d0050638389bcb1d238a68b11

你将为计算属性、组件状态、监视工具等添加类似的模板。Vue 中几乎所有的内容都有自己的特殊语法和更多的模板文件。

相比之下,Marko 也有相同的东西,但更简洁:

5061f731d8759c63cbf51f4d6f8cc560372dce90

我的重点不是关于是否要使用类,而是 Vue 使用的是任意对象结构而不是语言特性。

如果你觉得我有点想找事,我不会怪你。 Vue 还提供了基于类的语法,但它实际上更像是事后诸葛亮。

社区?聊天室?(Chat based community)

Vue 社区用户喜欢在 Discord 上闲聊,这更像是一款专为游戏玩家社区设计的聊天工具。如果你遇到问题,聊天可能是你最好的选择,因为官方论坛是一片荒凉的土地,而且你也不敢在 Github 上问问题。

聊天很乱,更主要的是聊天的内容无法被搜索引擎索引到。同样的问题(及其相关的讨论)注定要一次又一次地重复。

这种使用聊天来解答问题的趋势正困扰着开源项目,我认为它应该停止,根本没有集体学习作用。

没那么神奇(Not so magic)

只要你不偏离正轨,一切都会很好,但过了一段时间你可能会发现 Vue 周围有很多小小的 ifs 和 buts 。

比方说:

 ●  响应式系统仅跟踪一定条件下的变化。不要指望它能提供任何你想要的东西。通常,你可能需要尽可能地简化和整理数据以避免头痛。当然,这些都在文档的细则中有进行解释。
 ●  过渡系统 <vue-transition> 不适用于列表。实际上,你需要使用的是 <transition-group>,它的工作方式略有不同,并且会在 DOM 中引入新元素。此外,有些东西你本期望会是一个已解决的问题,但实际上你必须要自己去实现它。
 ●  如果你需要组件实例中的 non-reactive 状态,你将进入一个未知的领域。

等等。

不要误会我的意思,这些都不是什么大问题,但似乎每当你开始动手摸索时,就会出现其它的小烦扰。

糟糕的方面

架构模式不清晰

比如,提一个问题:在组件中还是在 Vuex 中处理 API 请求会更好?

该文档提供了有关如何在 Vuex 中处理 API 逻辑的示例,甚至有一个漂亮的图表:

33b16f5ab553bac924a73d33a7c45c64797d8188

这是否意味着验证逻辑也适用于 Vuex ?状态管理器会开始调解所有应用程序逻辑?

这些都不是很清晰的问题。大多数人会选择直接将 non-state 逻辑插入到 Vuex 操作中,或者更糟糕的是,直接插入到组件中,因为 Vue 的主页上有一段视频说明:

ad7c34ddfd8581558640bef417f57c20a7202474

现在来回答我上面的问题:API 逻辑不应该用 Vuex 或组件编写。在一些官方代码示例中,也有很好的说明。

总结

Vue 的使用率一直在不断增长,我怀疑这种趋势会很快停止。 它离 React 还很远(至少在中国以外),并且还需要与 Angular 竞争第二名。

在过去,不同于 React 的过于理想化,我认为 Vue 是一个很实用的库。现在的我仍然这么认为,但另一方面,我觉得 Vue 需要在实用主义之上更注重用户层面的精致、专注、优雅和简洁。

在使用两年后,我对 Vue 的印象一直是积极正面的。我仍然相信将我的团队从 React 迁移到 Vue 是一个很好的决定。不是因为 Vue 更好,而是因为它更适合我们。

Vue 能很好地完成了它的“本职”功能,并且在其他人失败的领域取得了成功,但起码到现在,客观来说,我并不认为 Vue 有比你技能雷达中的其他选项有更强或更差。

就这样。

补充:Vue CLI

上文中没有提到 Vue CLI ,我想解释下原因。

Vue CLI 是一个非常方便的脚手架工具。 在即将推出的 3.0 版本中,它将更加出色,因为它是一个完整的项目管理解决方案。

但是,便利的同时往往会带来更多成本,在我看来,这里的代价是不合理的。 Webpack 并不像很多人说的那么难,创建自己的入门套件可减轻大量配置时间。

当需要的成本低时,定制自己的自定义产品才更有意义。


原文发布时间为:2018-10-28

本文作者:王练

本文来自云栖社区合作伙伴“前端大学”,了解相关信息可以关注“前端大学”。

相关文章
|
算法 C# 数据库
【干货】一份10万字免费的C#/.NET/.NET Core面试宝典
C#/.NET/.NET Core相关技术常见面试题汇总,不仅仅为了面试而学习,更多的是查漏补缺、扩充知识面和大家共同学习进步。该知识库主要由自己平时学习实践总结、网上优秀文章资料收集(这一部分会标注来源)和社区小伙伴提供三部分组成。该份基础面试宝典完全免费,发布两年来收获了广大.NET小伙伴的好评,我会持续更新和改进,欢迎关注我的公众号【追逐时光者】第一时间获取最新更新的面试题内容。
554 1
|
人工智能 自然语言处理 IDE
通义灵码--我的编程好伙伴,让我晋升编程大神,从安装到使用
作为一名大数据开发工程师,我在编程过程中使用了通义灵码的@workspace与@terminal工具,这些工具极大地提高了我的工作效率,使我在处理新项目代码和实现新需求时更加得心应手。通过这些工具,我能够在不离开IDE的情况下快速解决问题,生成代码,优化现有代码,并通过智能问答功能获取即时帮助。通义灵码不仅支持多种主流编程语言,还提供了丰富的功能,如代码生成、单元测试生成、代码优化等,显著提升了我的编程体验。强烈推荐给所有希望提高编程效率的开发者。
|
11月前
|
监控 小程序 前端开发
微信小程序如何安装使用第三方包
本文档详细介绍了微信小程序开发中引入和使用第三方包的步骤。
1429 3
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
Linux 开发工具 数据安全/隐私保护
搭建 Git 私人服务器完整指南
本文详细介绍了如何从零开始搭建一个私人的 `Git` 服务器。首先,文章解释了 `Git` 的概念及其优势,并阐述了搭建私人 `Git` 服务器的重要性,包括数据隐私、定制化需求及成本效益。接着,文章分步骤指导读者完成服务器的准备工作,包括操作系统、硬件和网络要求。随后,详细介绍了在不同操作系统上安装 `Git` 的方法,并演示了如何创建 `git` 用户、部署仓库以及设置免密登录。此外,还提供了客户端连接远程仓库的具体步骤,包括 Linux 和 Windows 的操作方式。最后,文章探讨了迁移仓库的方法以及搭建 `Git` 服务器的一些进阶选项。
5032 0
搭建 Git 私人服务器完整指南
|
机器学习/深度学习 编解码 人工智能
EasyAnimate-v3版本支持I2V及超长视频生成
阿里云人工智能平台(PAI)自研开源的视频生成项目EasyAnimate正式发布v3版本
|
前端开发 程序员 API
从后端到前端的无缝切换:一名C#程序员如何借助Blazor技术实现全栈开发的梦想——深入解析Blazor框架下的Web应用构建之旅,附带实战代码示例与项目配置技巧揭露
【8月更文挑战第31天】本文通过详细步骤和代码示例,介绍了如何利用 Blazor 构建全栈 Web 应用。从创建新的 Blazor WebAssembly 项目开始,逐步演示了前后端分离的服务架构设计,包括 REST API 的设置及 Blazor 组件的数据展示。通过整合前后端逻辑,C# 开发者能够在统一环境中实现高效且一致的全栈开发。Blazor 的引入不仅简化了 Web 应用开发流程,还为习惯于后端开发的程序员提供了进入前端世界的桥梁。
1992 1
github设置仓库可见性 私人仓库设置
github设置仓库可见性 私人仓库设置
1028 0
|
Java Spring
mybatis-plus不使用spring
mybatis-plus不使用spring
639 0
|
机器学习/深度学习 人工智能 自然语言处理
CVPR 2022 | 视频Transformer自监督预训练新范式,复旦、微软云AI实现视频识别新SOTA
CVPR 2022 | 视频Transformer自监督预训练新范式,复旦、微软云AI实现视频识别新SOTA
492 0