Vue使用注意事项

Posted by Mars . Modified at

Vue使用的注意事项

一、v-for 与 v-if 不要同时使用

原因:

浪费性能。

v-for在Vue中比v-if优先级高,因此无论如何都会遍历所有列表中的子元素,才能确定哪些子元素被显示。(本意是只遍历+显示v-if为true的子元素集合)

解决方式:

使用computed等提前筛选出要显示的列表元素,然后用v-for遍历。

二、多个根节点的组件,需要显式指定Attribute继承的元素

原因:

具有多个根节点的组件不具有自动Attribute继承行为。如果未显式绑定 $attrs,将发出运行时警告。

解决方式:

使用v-bind="$attrs"显式绑定Attribute继承元素。

三、通过provide/inject机制传递的响应式变量,不要在inject一方修改

原因:

单向数据流。(在inject一方修改,会导致子组件修改父组件数据,导致数据流向混乱)

解决方式:

  1. provide的时候,对响应式对象进行readonly包装;
  2. provide的时候,同时提供修改响应式对象的方法,一并provide给inject方使用;

四、computed和watch的用途不同

  • computed解决的问题:【一依赖多】一个变量依赖多个响应式变量计算得出。 只有当computed属性依赖的响应式变量改变,computed才会重新计算;
  • watch解决的问题:【一影响多】一个变量影响着多个其他变量。 对这个变量进行监听,当它本身改变,执行对应逻辑,修改它影响的多个其他变量。

watch computed

Keywords: Vue
previousPost nextPost
已经有 1000000 个小伙伴看完了这篇推文。