vue技巧

为什么不用"组件"?
以"拖拽组件"为例, 众所周知组件至少有一个元素(根), 那么如果我们使用"拖拽组件":

<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插件, 可以用在任何框架下.