Vue中的Directive

[tonyzheng121]

Vue用了也有很长时间了,一直在思考一个问题,Vue中的directive跟component到底应该应用在什么场景下.Angular中有directive,因为它没有component的概念,很多对于通用组件的封装都会用directive来实现,里面可以操作dom等.所以我在想是不是Vue中对于这两个的区别就是对DOM操作的都是写成一个directive,没有对dom进行操作的就写成一个component.其实我看directive能做的事情,component都能完成,所以我还是觉得directive没什么必要.React中就没有directive.之后看了几篇文章,里面也说directive不是vue中很重要的一部分.

参考

• http://www.cnblogs.com/lunatic-cto/p/6139934.html
• https://v1.vuejs.org/guide/custom-directive.html

[vincenthou]

我觉得component和directive是两个层面的东西。其实angularjs1.x混淆了这两个概念，你可以用三种形式表示directive(作为组件和属性的样子跟vue中意义是不一样的)，angular2中明确分离了两个概念并且更进一步细化(分出了组件，结构化指令和属性指令)，vue里面directive的操作对象是DOM元素（它的生命周期钩子定义也是围绕DOM展开的）。directive从概念上比component更通用，directive描述的是一个UI组件绑定的行为（可以跨组件复用的），component代表的只是一个纯粹的UI元素。React中其实有跟vue中定义的component类似的概念，比如已经被官方推荐废弃的mixin。react是纯靠prop决定UI行为（UI = f (props, state)），原来mixin的功能可以通过高阶组件或者函数子组件实现，vue还保留了个口子，提供了一种DRY的选择。感觉vue之所以流行正是平衡了angularjs和react的概念，吸收了两者的精华，后发优势。