溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
關于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'
@Component
export 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'
@Component
export 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這個屬性，對于解決頁面緩存，組件重復不相互影響有重要的作用。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
