引言:我尽量能客观地来表述,但是您肯定会感受到我的一些主观立场,毕竟,在过去5年中,我在专职用React,显然,它是我在UI框架中的首选。
模板
Vue.js最大的一个特点(坦率地说,Vue.js最大的优势)就是其编写UI的模板语法。
在使用React5年之后(尽可能接近原生JavaScript),我并不想费心去学习另一种模板语法。
在我的职业生涯中,我曾学过各种语法,比如:Mustache.js、Handlebars、Lodash、Django甚至更多。我不想因为要使用Vue.js而必须去学习另一种模板语法。
虽然每种模板语法都有一些相似之处,但它们各自的特点让我在从一种切换到另一种的过程中非常头痛。
另一件我不喜欢的关于模板语法的事情是,它会在你编写的内容和在浏览器中运行的内容之间添加一层抽象。
React中,会通过JSX编译为函数调用:
而在Vue.js中,我不知道模板将会编译成什么样。
React和Vue.js在它们的模板中都仅允许使用JavaScript表达式,考虑到JavaScript的限制,我可以理解这点。但是Vue.js让我感到困惑的地方是它只能访问全局中的一部分内容。我知道这种限制肯定事出有因,但是我真的不愿意在开发的时候时刻想着Vue.js模板不是简单封装了一层JavaScript。
指令
指令是Vue.js的杀手级功能。它让Vue.js的模板变得特别强大。
但是。
指令实际上是一种API,您必须学习它们才能更有效地使用Vue.js模板。虽然与Angular.js(我以前使用的方式)相比,Vue.js指令少了很多,但这还是会提高你的使用成本。
而Vue.js赋予指令的灵活性则进一步加剧了这种情况,它带来了更多额外的学习成本。
比如指令参数,它有动态参数然后还有指令修饰符(虽然我在第一篇文章中把它作为Vue.js的优点,但这也带来了额外的学习成本)!
指令的大多数语法都不可怕,但是我确实发现v-for指令的语法非常反JavaScript。它比其他任何东西都更接近Python,这出现在JavaScript框架中会很奇怪。
组件
这点有点吹毛求疵了,但它可以佐证我对模板的观点。
由于Vue.js在很大程度上是模板驱动的框架,因此当您使用自定义组件扩展它时,您需要向Vue.js模板编译器告知所使用的组件。
这导致了很多重复的代码,在我看来似乎完全是多余的。
自定义事件
除了模板之外,自定义事件也是Vue.js和React的一个很大的区别。
React中的所有内容都是组件和props(到了一种很不健康的地步)。当您希望子组件与父组件进行通信时,您可以传递一个函数让子组件调用:
而在Vue.js中则通过事件来进行父子组件通信:
老实说,我不太确定我对通过事件进行父子组件通信的看法。
由于对发出和监听什么事件没有具体的约定,在Angular.js中使用这种方法会十分糟糕。
但是,Vue.js通过工具解决了这个问题,当父级尝试监听某个事件时,组件实际上会发出这个事件。
如果不使用这个工具,我认为Vue.js可能会遇到与Angular.js相同的问题,但是Vue.js的工具确实很出色。
话虽如此,React通过props传递函数的方式也不错,并且个人认为它更强大。
事件处理方法
与自定义事件相关的是Vue.js如何为其模板添加事件处理器。这也是我最鄙视的机制之一:引用字符串!
当在Vue.js模板中引用一个方法时,需要通过字符串的形式传递函数名称:
嗯…过去我在使用字符串引用的时候一直很糟。
但是像上面一样,Vue.js会通过工具捕获任何愚蠢的错别字。可惜,这已经是我非常不喜欢的一种方式了,并且不希望再次使用它。
响应式
Vue.js的大部分魔力来自其响应式。它让Vue.js能够在数据改变时有效且快速地更新UI。它使我想起了MobX,但在Vue.js中它是专为Vue.js设计的并且内置其中。
但是,MobX和Vue.js的响应式都有权衡取舍,在组件中使用响应式时,您必须考虑其实现细节。
例如,当创建响应式对象时,您通过reactive函数包装对象。但是,当您想使用原始值时,需要将其包装在ref中,其作用与React的useRef的hook非常相似。
基于Vue.js的响应式原理(使用Proxy),所以当要破坏一个reactive对象时,则需要将其包装在toRefs(reactiveObject)中,以确保您不会丢失反应性绑定。
对于原始参考值,Vue.js会自动解开模板中的参考值,这点虽然很好,但会造成引用值不一致的问题。
在模板中,您不必解包,但是在组件JavaScript中,您需要解包。对我而言,这些上下文切换似乎是不必要的而且乍一看会造成混乱。
对于常见的用例,确实很少会遇到这些边缘情况,但是我很