我们为什么需要指令

[lihongxun945]

为什么需要指令

这其实是一直困扰很多人包括我在内的一个问题。为什么我们有了组件还要指令呢？为什么Vue中有指令而React就没有呢？

要回答这个问题，其实并不容易。最近看到大漠的一个视频为什么需要指令，他是这么回答的：因为指令可以拓展HTML的功能（在Angular中）。我认为他说的观点没错误，但是其实没有抓住最根本的原因，拓展HTML的功能只是表面现象。

比如我可以继续问：难道我不能通过组件，或者直接操作VDOM来拓展HTML功能么？另外为什么React中没有指令，难道React就不需要拓展HTML功能么？

如果你也有这些疑问，那么请带着这些疑问继续阅读本文。

Vue vs React

先说我的结论：根本原因是Vue是数据驱动，而React是函数式编程。

这里我们从一个例子来看，比如我们要遍历输出一组用户的名字。

在Vue中是这样实现的：

<li v-for="(user, index) in users">{{user.name}}</li>

而在 React 中我们是这么实现的：

const userItems = users.map((user) => {
  return <li>{user.name}</li>
})

我们会发现，React 可以通过map函数很好的实现一个列表的遍历，而Vue中不用 v-for 指令就会很麻烦。根本原因是React和Vue不同的设计理念，决定了对DOM的操作方式的差异。

在 Vue 中，我们一般不会直接操作DOM（当然你愿意的话可以这么做），而是通过把当前组件的一个Context，一般包含 data, props, methods，在模板中我们其实是和这个Context交互的。这个Context本质就是一个数据，因此我们如何把数据渲染到HTML上呢？我们需要指令来把上下文的数据渲染到DOM上。（注：并不是说Vue中真的有context这个东西，只是一个概念)

而在React中完全是另一种实现，React直接在JS代码中混入了HTML（VDOM）代码，因此我们直接用JS操作VDOM，而不需要一个上下文作为中间的媒介，因此也不需要用指令来渲染VDOM。所以，React并不需要指令。

我们如果把一个组件，分为 JS 部分和 VDOM 部分，那么我可以画一张图来说明异同。

如上图所示，可以很清楚的看到Vue和React设计上的差异，以及指令存在的地方。

指令优点与缺点

上面我们解释了为什么Vue中需要指令。那么，指令的存在到底有什么优缺点呢？

我认为，指令存在的一个明显的优点是，可以把对DOM的一些通过逻辑进行封装，从而使代码逻辑更加规范。即，组件只负责处理数据，而指令负责处理DOM。
但是对于部分人来说，指令的存在会污染 HTML 代码，他们希望保持HTML的纯净，而把所有的逻辑都通过组件的方式来组织。

单说指令的优缺点其实意义不大，更多的应该说Vue的数据驱动和React的函数式编程的优缺点。这是一个仁者见仁智者见智的问题，不在这篇文章里面做过多的阐述，我这里只简单说下我的看法。

我本人对Vue更加熟悉，理解也更加透彻，绝大部分项目也是Vue写的，可以参见我的github仓库中的一些Vue项目，所以绝不存在贬低Vue的任何动机。但是其实从设计理念上来说，我更喜欢的是React的函数式编程而不是Vue的数据驱动。

我认为 Vue 通过指令来渲染模板，远不如React通过函数来渲染来的优雅。在Vue中，模板其实单纯从语法上说是一个大的字符串，无论是原生的HTML还是里面指令数据。而在React中，他们都是语法上的JS对象。字符串其实没有语法，而JS代码是有规范的语法的，也更容易进行语法检查。

由于Vue中的模板是个字符串，所以里面的写法其实更多是一种约定, 比如 v-bind v-on 等都是一种约定, 或者说是Vue自己发明的一种语法。而 React 中 绝大部分都是原生的JS语法。显然，我们更应该使用JS语法而不是自己去发明一种新的语法。

以上就是我对指令，以及Vue和React的异同的一些看法。

[masongzhi]

"显然，我们更应该使用JS语法而不是自己去发明一种新的语法。"
应该说是vue封装的函数，我们很多时候都是使用封装的函数而不是使用原生js

[MinJieLiu]

React 也是数据驱动呢

[lihongxun945]

@masongzhi 其实我指的是模板中的一些 插值，循环等语法，vue中会有对应的指令，而React中是用JS的语法操作JSX实现的。

[lihongxun945]

@MinJieLiu 我觉得不考虑 Redux 之类的话，React 还是函数式的特性更明显，相对于Vue。当然不是说React完全不是数据驱动的，只是在当前讨论的话题下这么说而已。

[alex2wong]

嗯(⊙_⊙)，对博主的思考点赞。我的看法是，vue对于普通场景推荐html模板和指令，目的是更简洁更贴近HTML。vue也支持jsx，对于喜欢all in js的同学更友好，而且在需要灵活使用的时候，比如接受一个render函数作为属性，可以按照外部使用者的需求去渲染dom。而且基于jsx的render函数本身就比视图模板更底层一些，所以用起来更原生更纯粹，这就是为啥有的同学喜欢写jsx。

数据驱动和函数式编程只是不同方面的描述，可以存在于同一个框架内😊

[tower1229]

vue的一个无关技术的好处是，vue的页面一眼就能看明白界面上大概有什么；反观react把dom揉进js的做法，看起来不够直观，尤其对于纯前端出身的人来说，这个区别挺明显的。