vue 基础

94 阅读1分钟

1.v-for v-if 哪个优先级高,如果两个同时出现,应该怎么优化性能

理解: v-for的优先级高

不能连用的原因:每次渲染时都需要遍历整个列表

优化:写成计算属性,循环计算属性过滤后的值,当关键条件没有改变时不需要重新循环

2.vue组件的data为什么必须是函数,vue根实例则没有此限制?

理解:组件可能存在多个实例。如果data是对象形式的,当一个组件变更状态时会影响其他实例,这是不合理的。data使用函数形式,当存在多个实例时,函数每次执行都会返回一个全新的data对象,多个组件间数据不会相互影响。这样做避免多个实例间状态污染的问题。 根组件只有一个实例,不存在上述问题。

3.vue中key的作用和工作原理?

理解:a. key的作用主要是为了高效的更新虚拟DOM,其原理是vue在patch过程中通过key可以精准判断两 个节点是否是同一个,从而避免频繁更新不同元素,使得整个patch过程更加高效,减少DOM操 作量,提高性能。

b. 另外,若不设置key还可能在列表更新时引发一些隐蔽的bug

c. vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分 它们,否则vue只会替换其内部属性而不会触发过渡效果。