關于react與vue中的key

之前在學習react的時候，常常遇到循環渲染組件時會提示需要在循環組件中加上key屬性，比如有一組列表：

import React, { Component } from 'react';export default calss MainApp extends Component { state = {  student: [  {   name: 'Jenny',   id: 'a001'  },  {   name: 'Jerry',   id: 'a002'  },  ] } render() {  return (   <div>     <ul>     {      this.state.student.map(item => {       // key是必須的屬性，不然瀏覽器會拋出錯誤提示       return (<li key={item.id}>{item.name}</li>)       })     }     </ul>    </div>  ) }}

可能對這個key不是太了解，或者也不許要太深入地去了解它，只知道在循環渲染組件時，隨手加上這個屬性就好。摘自網上的的文章的總結，key的作用為

key的作用主要是為了高效的更新虛擬DOM

雖然不是很懂，但也裝作大切大悟的樣子。key是一個給框架內部用的，我們只管給它加上去就好。

Vue中的key

同樣有一個vue的組件：

<template> <div>  <ul>   <!-- key是必須的屬性，不然瀏覽器會拋出錯誤提示 -->   <li v-for="itme in student" :key={item.id}>{{item.name}}</li>  </ul> </div></template><script>import vue from 'vue';import { Component } from 'vue-property-decorator'@Componentexport default calss MainApp extends vue { student = [  {   name: 'Jenny',   id: 'a001'  },  {   name: 'Jerry',   id: 'a002'  }, ]}</script>

同樣的，回到vue中的key,其實也類似，解釋key的作用，就不得不介紹一下虛擬DOM的diff算法了...算了，我也不是很懂
簡單理解就是react與vue內部判斷組件的一個標識，用于更新或者重用組件的一個重要屬性

更新

key用于更新：是框架內部的算法實現，一兩句話也說不清楚（主要是我也不懂這個算法）,簡單理解為當數據更新了，框架內部會判斷更新頁面哪些DOM元素需要更新刪除等操作；

重用

key用于組件重用：其實key不止是在map或者v-for中使用，我們也也可以在其他組件上使用這個屬性（至于哪個組件可以加，小孩子才做選擇，我們的目標是全都加！）,當然加了貌似也沒什么毛病，只是加了顯得有些多余！
在做SPA的時候，我們都會有一個主組件App.vue：

<template> <div id="app">  <div>   <keep-alive>    <router-view />   </keep-alive>  </div> </div></template><script>import Vue from 'vue'import { Component } from 'vue-property-decorator'@Componentexport default class MainApp extends Vue { }</script>

上面代碼會把頁面全部都緩存下來（路由切換回來的時候，頁面表單填寫的內容沒有被清空）,這是應為在<router-view />的外面包裹著keep-alive標簽, 頁面數據都保留下來了，避免用戶切換路由，數據丟失的情況,看似很完美！