为什么不用"组件"?
以"拖拽组件"为例, 众所周知组件至少有一个元素(根), 那么如果我们使用"拖拽组件":
<my-drag>
<span>待拖拽</span>
</my-drag>
<!--实际dom结构-->
<div>
<span>待拖拽</span>
</div>
可以看到组件破坏了dom结构, 使用时可能会直接影响样式, 所以很多vue插件都使用了"vue指令"解决这个问题.
更好的"vue指令"
这个是饿了么ui的InfiniteScroll(无限滚动)指令:
<ul
v-infinite-scroll="load"
infinite-scroll-distance="10"
infinite-scroll-delay="10">
<li v-for="i in count">{{ i }}</li>
</ul>
export default{
directives:{
infiniteScroll
}
}
对比下如果用Event实现后:
<ul @infinite-scroll="load">
<li v-for="i in count">{{ i }}</li>
</ul>
export default{
mounted(){
const is = new InfiniteScroll(this.$el,{
distance:10,
delay:10
});
this.$on('hook:destroy', is.destroy);
}
}
用了Event方式, 你可以把自己的组件做成构造函数, 上面的"状态管理"问题就好解决了, 而且你这样写出的代码就不局限于是vue插件了, 他就是一个普通的js插件, 可以用在任何框架下.