關于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標簽, 頁面數據都保留下來了，避免用戶切換路由，數據丟失的情況,看似很完美！
比如一個產品頁面：
當兩個路由都使用同一個組件如Product.vue這個組件時，來回切換兩個路由，兩個頁面填寫的東西就會共用！切換頁面時，發現頁面自動填寫了上個頁面的東西，這并不是我們想要的!
如果頁面比較少, 比如只有A、B兩個產品，可以每個頁面都定義一個路由地址，并且name屬性不一樣的值:
{ path: '/product', name: 'product', component: Product, children: [ { path: 'a', name: 'aProduct', component: Detail }, { path: 'b', name: 'bProduct', component: Detail }, ]}這時這樣<router-view :key="$route.name"/>就解決上面的問題了
But，頁面較多的時候，定義路由就不能像上面這樣定義了:
{ path: '/product', name: 'product', component: Product, children: [ { path: 'detail/:id', name: 'aProduct', component: Detail }, ]}此時路由變成了動態的了，那么，key就不能取name的值了，此時就需要引入一個變量來存儲路由的歷史記錄了，當路由切換時，在歷史記錄中匹配相應的路由，在歷史記錄中保存的一個位置值，取出來賦值個key就可以了
嗯，前面好像廢話有點多，而且貌似有騙標題的嫌疑，其實理解key這個屬性，對于解決頁面緩存，組件重復不相互影響有重要的作用。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
