Vue经验之谈

204 阅读3分钟
  1. 嵌套组件与指令注意事项 当组件粒度过细时,自定义指令可能不会生效。 比如一个页面上下布局,上部是查询条件,下面是展示数据的表格。当隐藏显示查询条件区域时,希望表格可以动态计算高度,为了实现这一功能,你在表格上添加了自定义指令实现该功能。

如果你就一个页面,上是查询条件,下是表格,data中一个show控制查询区域的显示与隐藏,这时show与自定义指令在一个页面中,show的变化会导致自定义指令的vnode变化,触发自定义指令的update与componentUpdated方法,动态计算高度生效。

而当你抽象了过深的组件,比如你一个页面就是一个组件A,组件A又嵌套查询组件B与表格组件C,这时,你隐藏显示时,表格上的自定义指令将不会生效,导致动态计算高度失败。

  1. ref的危害 ref作为一种获取组件实例的手段,本来挺好,但过度使用完全破坏了组件的封装性,真是灾难。 最近翻看项目代码,各组件通信除了使用props外,大量使用this.$refs.componentName.componentMethed。导致我偶尔修改某个人页面的bug时完全看不懂它的流程。它的隐藏显示不是通过父组件传递一个show属性控制,而是父组件通过ref直接调用它的方法,组件的初始化也不再按需要在生命周期中调用,也是父组件通过ref直接调用一些方法。一问为什么这么使用,能和讲半天理由……

  2. mixins的危害 除了ref的过度使用外还有mixins的使用,对于这个功能,我完全不赞成。仅是为了共用一些业务与代码而提供它就像打开了潘多拉魔盒。对于一些低层代码库使用还勉强可以接受,但用在业务中又是一场灾难。mixins可能一开始是好的,但最终的内容有一半是组件根本不需要的,为了区分它们而又在组件里加一些属性作为判断真是垃圾代码。

  3. provide与inject的危害 说实话,这也是一个魔鬼,再配合上mixins,简直是地狱。使用它,数据的传递完全被破坏了,组件的方法也不限于本组件里调用了,而是被注入的组件中都有可能调用,各组件严重耦合在一起,一些不专业人士又不会使用调试工具,导致解决bug时完全处于抓瞎状态。

虽然尤大本意是好的,但低于他水平的人太多了,一旦使用就是灾难,希望能从语言层面上解决一下,比如react就不再推荐使用mixins了。