v-for循环组件问题？

  • Z时代
  • 2024-03-04
  • 分类：IT

  1. v-for循环组件，组件key都是同一个固定值，组件还会被重新创建吗
  2. v-for循环组件，内部组件每次的生命周期都是从beforeCreated开始的吗

回答：

  1. 使用 v-for 循环渲染组件，当数据更新导致重新渲染时，Vue将会尽可能地复用这些相同的组件实例，而不是重新创建它们。

特殊attribute key

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

  1. 使用 v-for 循环渲染组件，如果一个组件实例是第一次创建（例如，列表项第一次被添加到 v-for 循环中），那么Vue会按照正常的生命周期顺序创建新的组件实例（beforeCreated -> created -> beforeMount -> mounted）；如果一个组件实例在之前已经被创建过，并且现在被复用了（例如，v-for 循环中的组件列表中的项发生了变化），那么Vue会重用该组件实例，则仅会经过更新相关的生命周期（beforeUpdate -> updated）。
生命周期图示

以上是 v-for循环组件问题？ 的全部内容， 来源链接： utcz.com/p/934704.html

回到顶部