标签：head 变量 nbsp compute 理解 更新 model port delete
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>
<label for="#">ID</label>
<input type="text" placeholder="输入ID" v-model="id" />
<label for="#">NAME</label>
<input type="text" placeholder="输入NAME" v-model="name" />
<button @click="add">添加</button>
</div>
<p v-for="(user,i) in users" :key="user.id">
<input type="checkbox" /> id={{user.id}} name={{user.name}}
</p>
<hr />
<button @click="deleteOne">删除元素</button>
<span v-for="(data,i) in arr" :key="i">{{data}}</span>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
id: "",
name: "",
users: [
{ id: 10, name: "小明1" },
{ id: 11, name: "小明2" },
{ id: 12, name: "小明3" },
],
arr: [1, 2, 3, 4, 5],
},
methods: {
add() {
this.users.unshift({ id: this.id, name: this.name });
},
deleteOne() {
this.arr.splice(3, 1);
},
},
computed: {},
});
/*
v-for 为什么要加 key？
1. 虚拟DOM。
Vue渲染为什么比纯JS渲染DOM效率要高？
因为JS渲染DOM，当数据改变的时候，JS要把所有数据再重新渲染一遍。
比如：[1,2,3,4,5]，当删除3这个数据的时候，js会重新把整个数组再重新渲染一遍。而Vue只会针对性的渲染改变了的元素，而数据没有发生变化的元素，Vue是不会进行重复加载的。所以说，vue减少了DOM的操作次数。
Vue为什么渲染效率高呢？
Vue通过对比新旧两个虚拟DOM的方式，最终判断出来哪些节点发生了变化，最终将变化了的虚拟DOM节点，更新到真实DOM上。
1. 第一次加载组件模板的时候，Vue会将这个组件模板转化成虚拟DOM树对象，保存到一个js变量中，这个模板需要加载什么数据，此时的虚拟DOM都会记录下来。
2. 当后续数据发生改变的时候，此时Vue会根据最新的数据及组件模板再生成一个虚拟DOM树对象，保存到另外一个js变量中，接下来将这个新的虚拟DOM对象和上一次的旧的虚拟DOM进行对比，Vue会记录内容发生变化的节点，最终，将变化的节点内容，更新到真实DOM中去。
Vue内在的重用机制，再对比相同标签的时候，如果不加key，Vue会就地重用相同的标签元素。
v-for中的key能否使用 数据的索引 作为Key值？
看情况，只要能保证 索引值 是唯一的，就可以使用索引作为key值。
*/
</script>
</body>
</html>
效果如下：
Vue v-for指令添加key指令的理解
标签：head 变量 nbsp compute 理解 更新 model port delete
原文地址：https://www.cnblogs.com/yangcaicai/p/14191653.html
