Vue 条件渲染,列表渲染，key的作用和原理，列表过滤，2024年最新美团点评面试经验

欢迎来到，{{name}}

欢迎来到，{{name}}

---

欢迎来到,{{name}}

欢迎来到,{{name}}

---

当前的n值为：{{n}}

<button @click=“n++”>n加1

Angular

React

Vue

哈哈

---

你好

我是

div

你好

我是

template

2. 列表渲染

=====================================================================

形式上分为下面几种：

**使用v-for遍历数组。

使用v-for遍历对象。

遍历字符串 (用的少)。

遍历指定次数 (用的少)。**

注意事项：

一定注意下面的注释，value，key，index的各个关系位置，搞清楚！！

源码：

人员列表(遍历数组)

• {{p.name}}-{{p.age}} ---索引值：{{index}}

• ---

• {{p.name}}-{{p.age}} ---索引值：{{index}}

• 汽车信息(遍历对象)
• value:{{value}}} ---key：{{key}}

• 遍历字符串
• {{char}}----{{index}}

• 遍历指定次数
• {{number}}----{{index}}

• 3. key的作用和原理

  ==========================================================================

  需要我们注意的是，在我们定义key时，使用index和id的这种作法有什么区别，什么使用用index？什么使用用id？

  注意事项：

  如果没有定义key属性，默认就是index作为key的值，作为唯一标识。

  3.1 index作为key 的效果和问题

  ---

  一定理解好虚拟DOM和真实DOM，以及中间的虚拟DOM对比算法。

  

  上图对比虚拟DOM时，对比了三部分，第一个key，第二个内容(张三–18)，第三个input标签。大体上就这样一步步对比，在这key作为唯一标识，内容不同就会覆盖。注意这里我们添加的时真实DOM中的input，在虚拟dom中input还是一样的，因此直接会使用真实DOM中的内容。

  这里使用index来操作的话，就会出现这种问题：

  源码：

  人员列表(遍历数组)

• {{p.name}}-{{p.age}} —索引值：{{index}}

  

  点击添加个人后，就会出现下面这样的问题。

  

  一定注意index这样类似的改变顺序的错误。

  3.1 id作为key 的效果(最佳)

  ---

  

  使用id来实现，就可以避免上面index所出现的问题。

  源码：

  人员列表(遍历数组)

• {{p.name}}-{{p.age}} —索引值：{{index}}

  3.3 两个总结

  ---

  

  4. 列表过滤

  =====================================================================

  4.1 通过watch，filter和indexOf()来实现

  ---

  我们通过使用Vue，来实现一个模糊查询。通过watch，filter和indexOf来实现，一定注意indexOf在空字符串情况下怎么操作的。

  

  源码：

  人员列表

• {{p.name}}-{{p.age}}-{{p.sex}}

  4.2 通过使用computed，filter和indexOf()来实现

  ---

  #region和#endregion，这两个可以将注释的内容折叠起来。

  computed比watch要简单一些，推荐使用

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
  
  
  
  
  
  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  

  最后

  我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

  篇幅有限，仅展示部分截图：

  

  

  

  一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  

  知识点，真正体系化！**

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  [外链图片转存中…(img-c6hrUnrx-1712772348548)]

  最后

  我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

  篇幅有限，仅展示部分截图：

  

  

  

  一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  [外链图片转存中…(img-ir5lcWg9-1712772348548)]