Une brève discussion sur v-for dans Vue, la valeur clé affecte l'effet de transition et l'effet d'animation (explication détaillée du code)

Dans l'article précédent "Vous apprendre à utiliser Vue pour obtenir des effets d'animation (avec code)", j'ai présenté comment utiliser Vue pour obtenir des effets d'animation. L'article suivant vous donnera une brève introduction à l'impact des valeurs clés de Vue sur les effets de transition et les effets d'animation. J'espère qu'il vous sera utile.

À propos du v-for de Vue.js, le changement d'ordre de la clé affecte les performances de l'animation de transition strong> Vue.js的v-for，key的顺序改变，影响过渡动画表现

关于Vue.js的v-for，key的取值，影响过渡动画表现这个问题是在写Message组件出现的，先看代码部分

子组件：

<!-- Notice： -->
<transition :name="transitionName" @enter="enter" @leave="leave">
  ...... ..
</transition>
<!-- JS: -->
<script>
  export default {
    methods: {
      enter(e) {
        e.style.height = e.scrollHeight + "px";
      },
      leave(e) {
        e.style.height = 0;
      },
    },
  };
</script>
<!-- CSS: -->
<style>
  transition: all 0.2s ease-in-out;
</style>

父组件：

<notice v-for="(item, index) in notices" :key="index">
  ......
</notice>

JS：

data() {
    return {
      notices: []
    };
  },
  //notices 新增的时候自动加入定时器来移除
  setTimeout(() => {
    let index = 0 //这里假设我已经取得了移除的 index索引, 可能不是依次的123456
    this.notices.splice(index, 1);
  }, time) //time 为传入的随机不等值

理论上当某一个子组件被移除时，他会有一个流畅的高度从 1 到 0 到过度动画，但是不然，每次移除时，动画每次只会应用到最后一个。百思不解，各种js，css实现都不是很理想。依然一卡一卡的。 

又去官网把文档翻了一遍。 找出了问题所在。for遍历的时候，有一个值很重要：key当key取值为Number时，每次数组被改变，dom会重新渲染，所以动画每次只会影响最后一个。

当key取值为String时，每次数组被改变，dom则默认用“就地复用”策略

所以把key改为String时，则就是我想要当结果，流畅的依次性的执行了动画，完美官网的例子https://cn.vuejs.org/v2/guide/list.html#key

这里需要注意的是，key的取值为String／Number，所以测试时key值为了避免不重复，应该取值为随机的不重复string/number, 不要使用默认的index

Concernant la question de savoir comment les valeurs de v-for et key de Vue.js affectent les performances de la transition animation, j'écris un Message Si le composant apparaît, regardez d'abord la partie code

Composant enfant :

rrreee

Composant parent :

rrreee

JS :

rrreeeThéoriquement, lorsqu'un composant enfant est supprimé, il aura une hauteur lisse de 1 à 0 code> pour faire la transition avec l'animation, mais sinon, à chaque suppression, l'animation ne sera appliquée qu'à la dernière à la fois. Je suis perplexe, toutes sortes d'implémentations <code>js, css ne sont pas très idéales. Toujours coincés les uns après les autres.

Allez sur le site officiel et relisez le document. J'ai trouvé le problème. Lorsque for traverse, une valeur est très importante : key Lorsque la valeur de key est Number, à chaque fois le numéro Lorsque le groupe est modifié, dom sera restitué, donc l'animation n'affectera que le dernier à la fois.

Lorsque la valeur de key est String, chaque fois que le tableau est modifié, dom utilisera la stratégie de "réutilisation sur place" en default🎜🎜 🎜Donc, lorsque je change la clé en String, je veux que le résultat soit exécuté de manière fluide et séquentielle. Un exemple du site officiel parfait https://cn.vuejs.org/v2/guide/list.html#key. 🎜 🎜🎜Il convient de noter ici que la valeur de key est String/Number, donc la valeur de key pendant les tests Afin d'éviter la non-duplication, la valeur doit être une chaîne/numéro aléatoire et non dupliquée, et ne pas utiliser l'index par défaut code>. 🎜🎜[Fin]🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo JavaScript🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!