开发者学堂课程【React 入门与实战：演示 Vue 和 React 中的 key 的作用】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8086
演示 Vue 和 React 中的 key 的作用
内容介绍：
一、JavaScript 语句后是否加分号
二、演示 Vue 中 key 的作用
三、注意事项
一、JavaScript 语句后是否加分号
可以在浏览器里面搜索，没有应不应该，只有喜不喜欢。
JavaScript 语法长得像 C-like 不代表它本质上和 C 是一类语言，所有直觉性的”当然应该加分号“都是保守的、未经深入思考的草率结论。
后面新设计的语言里可选分号的多的去了，光是”可以加分号但是大家都不加”的语言就有：
Go,Scala,Ruby,Python,Swift,Groovy...
如果[ { + - /五个符号开头的之一之前都必须加；如果不是这五种情况其他情况都可以不加
}）；
[1,2,3].forEach() 这一行是[开头，上一行就必须加；
；[1,2,3].forEach() 这一行开头加；也可以
二、演示 Vue 中 key 的作用
运行出来了，但出现警告，在数组中的每一项必须加 key 元素。React 和 Vue 中key 的作用是完全一样的。
演示 Vue 中 key 的作用
代码案例:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport”content=”width=device-width,initial-scale=1.0”>
<meta http-equiv-”X-UA=Compatible”content=”ie=edge”>
<title>Document</title>
<script src=”./vue.js”></script>
</head>
<body>
<!--容器-->
<div id=”app”>
<ul>
<li v-for="item in list">编号:({iten.id}}-姓名: {{item.name}</li>
</ul>
</div>
<script>
const vm = new vue ( {
el: '#app ' ,
data: {
list: [
{ id: 0,name:'赢政’}，
{ id: 1, name: '吕不韦}，
{ id: 2, name:'嫪毐’}
]
}
})
<!--添加新名称-->
<div>
<input v-model=”uname”/>
<button @click=”add”>添加</butten>
</div>
<ul>
<li v-for=”item in list”>编号:{{item.id}}---姓名：{{item.name}}
<ul>
<li v-for=”item in list”>
<input type=”checkbox”>编号:{{item.id}}---姓名：{{item.name}}
<ul>
<li v-for=”item in list”:key=”item.id”>
<input type=”checkbox”>编号:{{item.id}}---姓名：{{item.name}}
如果在进行v-for或者map循环的时候，如果需要保持它的状态（这一项被选中了，或者没有被选中），就需要提供一个key。否则状态会混乱。
不管什么情况下，如果使用了v-for，就一定要加key
</ul>
</div>
<script> 创建script的标签
const vm new Vue({ 在标签里面创建实例
e1.’#app’,
data: {
uname:’’,
list:{
{id:0,name:’嬴政’}
{id:1,name:’吕不韦’}
{id:2,name:’嫪毐’}
]
},
mothods: {
add() {
//出现一个新对象
var newuser = { id:this.list.length,name:this.uname }
this.list.push(newuser)
var newuser = { id:this.list.length,name:this.uname }
this.list.unshift(newuser)
}
}}
</script>
</body>
</html>
代码解析：
新建一个文件夹 test，找到一个 vue 的文件，放到 test 文件夹中。再新建一个testkey.html,导入 src=”./vue.js”当前目录下 vue.js，在页面上<div id=”app”>容器，
创建一个 script 标签，在标签内部创一个 vm 的实例，el 控制#app区域，
data 对象 id:0,name：嬴政，建一个数组。把这个数组渲染在页面上。添加新名称，div中<input v-model=”uname”/>，<button @click=”add”>添加</butten>。
uname 需要默认，复制添加中的方法名称放到 methods 中，拿到一个 uname，组织成一个对象 push 进去，var newuser = { id:this.list.length,name:this.uname }拼接出一个新对象。
在每一行前面加一个复选框，在文本之前放一个checkbox，把push改成unshift。id 为一类，给每一个li加上一个 key=”item.id”,如果在进行v-for或者用map循环的时候，需要保持它们的状态，选中或没被选中就是一个状态，需要保持状态，提供一个 key，否则状态会紊乱，动画必须要提供 key，不管什么情况下，只要用了v-for 都需要加 key。
找到 index.js,forEach 需要加 key，注意 React 中，需要把 key 添加给被 forEach或 map 或 for 循环的直接控制元素。
三、注意事项
注意：
React 中，需要把 key 添加给 被 forEach 或 for 循环直接控制的元素
arrStr.forEach(item => {
const tempt = <h5 key={item}>{item}</h5>
nameArr.push(temp)
}）
{arrstr.map(item=><div key={item}><h3>{item)</h3></div>)}
</ div>, document.getElementById ( ' app '))
key 中直接用 Id,key 给直接被 map 或者 forEach 控制的元素，假如h3外面包了一个div,v 里面放了一个h3,div是h3的父元素。
key 直接加给 div。
