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一方修改,会导致子组件修改父组件数据,导致数据流向混乱)
解决方式:
- 在
provide
的时候,对响应式对象进行readonly
包装; - 在
provide
的时候,同时提供修改响应式对象的方法,一并provide给inject方使用;
四、computed和watch的用途不同
- computed解决的问题:【一依赖多】一个变量依赖多个响应式变量计算得出。 只有当computed属性依赖的响应式变量改变,computed才会重新计算;
- watch解决的问题:【一影响多】一个变量影响着多个其他变量。 对这个变量进行监听,当它本身改变,执行对应逻辑,修改它影响的多个其他变量。