【九月打卡】第1天 vue基本知识点串讲-part2

• 课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack

• 课程章节： vue基本知识点串讲-part2

• 主讲老师：双越

课程内容：

今天学习的内容包括：

vue基本知识点串讲-part2

课程收获：

如何遍历对象

可以使用v-for遍历，key尽量保持唯一，不要使用random或者index

v-for和v-if不能一起使用

v-for 和 v-if 同时使用有 3 种情景：
部分遍历（内/外部条件）：一个 list 中某个属性值符合条件的遍历出来；
全部遍历（外部条件）：某外部条件符合条件时遍历全部。
全部遍历（内部条件）：根据某内部条件渲染出不同的内容。
注：内部条件指被遍历数据内部属性值或条件；外部条件指与独立于被遍历数据以外的数据。
会造成性能的浪费，在vue2中会优先执行 v-for, 当 v-for 把所有内容全部遍历之后 , v-if 再对已经遍历的元素进行删除 , 造成了加载的浪费 , 所以应该尽量在执行 v-for 之前优先执行 v-if , 可以减少加载的压力。
解决方案为（1）、循环前可以先剔除不要的数据，例如在计算属性中先用内/外部条件处理数据，再遍历处理后的数据（2）、外部条件放到遍历的父级元素上，没有父级可以使用。根据某内部条件，显示不同内容。注意 key 不能放 template 标签上。

事件修饰符，按键修饰符

今天学习课程共用了35分钟，重新了解了一下vue基本知识点，这是我不知道第多少次决心补习面试题，希望能够坚持下去。