Resumen de la cuadragésima octava semana: el valor clave de v-for en vue

El valor clave de v-for en Vue

    Cuando vue usa v-for, si no hay una identificación única devuelta por el backend, a menudo uso el índice en lugar de una identificación única. No encontré ningún problema antes. Después de aprender el código fuente, sé que esto puede causar el vue El componente no se actualizará, pero después de tanto tiempo, todavía no he encontrado ningún problema aquí, así que sigo escribiendo así.
    componente principal:

<template>
  <div class="dataPreview">
    <div style="width: 100%; background-color: rgb(0 0 0 / 60%)">
      <div class="indexContainer">
        <div class="dataContainer">
          <div class="preview">
            <DataShowContent v-for="(item,index) in show" :key="index" :msg="item" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DataShowContent from './DataShowContent.vue';
export default {
  name: 'DataShow',
  components: {
    DataShowContent
  },
  data() {
    return {
      show: [
        {
          num: '0'
        },
        {
          num: '0'
        },
        {
          num: '0'
        },
        {
          num: '0'
        }
      ]
    };
  },
  mounted() {
    this.getMsg();
  },
  methods: {
    async getMsg() {
        this.show[2].num = 1;
    }
  }
};
</script>

    Subensamblaje:

<template>
  <div class="previewList">
    <span class="icon">
      <i :class="msg.ico" style="color: rgb(51 170 238);line-height: 70px"></i>
    </span>
    <h2 class="timer count-title" data-to="965" data-speed="1500">
      {
   
   { num }}
    </h2>
    <p>{
   
   { message.name }}</p>
  </div>
</template>

<script>
export default {
  name: 'DataShowContent',
  props: ['msg'],
  mounted() {
    this.getNum();
  },
  methods: {
    getNum() {
      console.log(this.msg.num);
    }
  }
};
</script>

    En el código anterior, descubrí que la función getNum en el componente secundario solo genera 0 una vez, lo que indica que cuando se actualiza el valor en el componente principal, no se detecta en el componente secundario, por lo que no hay actualización. problema de usar el índice como clave. Así que usé la biblioteca nanoid para mejorar.

nanoide

//npm i nanoid,安装nanoid
import {nanoid} from 'nanoid';//引入nanoid
nanoid();//nanoid的使用

    El código del componente principal se mejora de la siguiente manera.

<template>
  <div class="dataPreview">
    <div style="width: 100%; background-color: rgb(0 0 0 / 60%)">
      <div class="indexContainer">
        <div class="dataContainer">
          <div class="preview">
            <DataShowContent v-for="item in show" :key="index.key" :msg="item" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {nanoid} from 'nanoid';
import DataShowContent from './DataShowContent.vue';
export default {
  name: 'DataShow',
  components: {
    DataShowContent
  },
  data() {
    return {
      show: [
        {
          num: '0',
          key: nanoid()
        },
        {
          num: '0',
          key: nanoid()
        },
        {
          num: '0',
          key: nanoid()
        },
        {
          num: '0',
          key: nanoid()
        }
      ]
    };
  },
  mounted() {
    this.getMsg();
  },
  methods: {
    async getMsg() {
    	this.show[2].key = nanoid();
        this.show[2].num = 1;
    }
  }
};
</script>