关于Vue的就地更新策略的解析
在Vue中使用v-for渲染列表时，默认使用就地更新策略。该策略默认是基于索引的，规定在列表绑定的数据元素顺序变化时，不会重新创建整个列表，而只是更新对应DOM元素上的数据。以下代码实现了一个TODO列表的勾选、添加和删除功能：
<!DOCTYPE html>
<html>
<head>
<title>In-Place Update Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(todo, index) in todos" :key="index">
<input type="checkbox" v-model="todo.completed">
{{ todo.text }}
<button @click="removeTodo(index)">Remove</button>
</li>
</ul>
<button @click="addTodo">Add Todo</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn Vue.js', completed: false },
{ text: 'Build an app', completed: true },
{ text: 'Deploy to production', completed: false }
]
},
methods: {
removeTodo(index) {
this.todos.splice(index, 1);
},
addTodo() {
this.todos.push({ text: 'New Todo', completed: false });
}
}
});
</script>
</body>
</html>
该策略模式是高效的，避免了大量的DOM重排重绘。
然而，该策略基于一个前提：列表项内部的内容不依赖于子组件的状态或临时的DOM状态。如违背该前提，就可能导致意外，因为Vue不会重新创建子组件或恢复临时DOM状态。
下面代码实现了v-for列表项内容依赖于子组件的状态而导致意外的情况：
<!DOCTYPE html>
<html>
<head>
<title>In-Place Update with Child Component</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用 v-for 渲染子组件列表 -->
<child-component v-for="(item, index) in itemList" :key="index"
@remove="removeItem(index)"></child-component>
</div>
<script>
Vue.component('child-component', {
template: `
<div>
<!-- 子组件的内容和状态 -->
<button @click="increment">{{ count }}</button>
<!-- 删除 -->
<button @click="$emit('remove')">删除</button>
</div>
`,
methods: {
increment() {
this.count++;
}
},
data(){
return{
count:0
}
}
});
const app = new Vue({
el: '#app',
data: {
itemList: new Array(5).fill(null)
},
methods: {
removeItem(index) {
this.itemList.splice(index, 1);
}
}
});
</script>
</body>
</html>
我们先点击某项计数器，再删除该项：
为了解决该问题，我们为每一项绑定一个唯一的key属性：
<!DOCTYPE html>
<html>
<head>
<title>In-Place Update with Child Component</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用 v-for 渲染子组件列表 -->
<child-component v-for="(item, index) in itemList" :key="item.id"
@remove="removeItem(index)"></child-component>
</div>
<script>
Vue.component('child-component', {
template: `
<div>
<!-- 子组件的内容和状态 -->
<button @click="increment">{{ count }}</button>
<!-- 删除 -->
<button @click="$emit('remove')">删除</button>
</div>
`,
methods: {
increment() {
this.count++;
}
},
data(){
return{
count:0
}
}
});
const app = new Vue({
el: '#app',
data: {
// 为每一项添加一个id
itemList: [
{ id: 0 },
{ id: 1 },
{ id: 2 }
]
},
methods: {
removeItem(index) {
this.itemList.splice(index, 1);
}
}
});
</script>
</body>
</html>
效果如下：
那么就有疑问了：为什么前面代码中的key属性绑定了index没有用呢，index难道不是唯一的吗？很简单，这是由于我们删除的是数据项，而不是数组索引，使用id就不会有这个问题，删除一项连带着删除了该唯一id。
关于Vue的就地更新策略的解析的更多相关文章
- Unity手游之路<十三>手游代码更新策略探讨
http://blog.csdn.net/janeky/article/details/25923151 这几个月公司项目非常忙,加上家里事情也多,所以blog更新一直搁置了.最近在项目开发上线过程中 ...
- Unity手游之路手游代码更新策略探讨
版权声明: https://blog.csdn.net/janeky/article/details/25923151 这几个月公司项目非常忙.加上家里事情也多,所以blog更新一直搁置了. 近期在项 ...
- vue的就地复用--- v-for与：key
v-for遵循的是vue的就地复用原则.文本与数据是绑定的,所以当文本被重新渲染的时候,列表也会被重新渲染. 就地复用只适用于不依赖子组件状态或临时DOM状态的列表渲染输出.[比如表单输入值的列表渲染 ...
- Unity手游之路<十二>手游资源热更新策略探讨
http://blog.csdn.net/janeky/article/details/17666409 上一次我们学习了如何将资源进行打包.这次就可以用上场了,我们来探讨一下手游资源的增量更新策略. ...
- 分布式系统中一些主要的副本更新策略——Dynamo/Cassandra/Riak同时采取了主从式更新的同步+异步类型，以及任意节点更新的策略。
分布式系统中一些主要的副本更新策略. 1.同时更新 类型A:没有任何协议,可能出现多个节点执行顺序交叉导致数据不一致情况. 类型B:通过一致性协议唯一确定不同更新操作的执行顺序,从而保证数据一致性 2 ...
- [unity3d]手游资源热更新策略探讨
原地址:http://blog.csdn.net/dingxiaowei2013/article/details/20079683 我们学习了如何将资源进行打包.这次就可以用上场了,我们来探讨一下手游 ...
- 利用Dnspod api批量更新添加DNS解析【python脚本】 - 推酷
利用Dnspod api批量更新添加DNS解析[python脚本] - 推酷 undefined
- odi增量更新策略
增量更新策略:通过一个“update key”比较流数据记录与目标表中的记录比较进行数据整合.具有相同“update key”的记录当相关联列不同时将被更新:在目标表中不存在的记录将被插入.这种方式用 ...
- vue加载优化策略
vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...
- [转]Unity手游之路<十二>手游资源热更新策略探讨
最近梳理了下游戏流程.恩,本来想写下,但是,还是看前辈的吧 版权声明: https://blog.csdn.net/janeky/article/details/17666409 上一次我们学习了如何 ...
随机推荐
- 2022-05-23：给定一个数组arr，你可以随意挑选其中的数字， 但是你挑选的数中，任何两个数a和b，必须Math.abs(a - b) ＞ 1。 返回你最多能挑选几个数。 来自美团。
2022-05-23:给定一个数组arr,你可以随意挑选其中的数字, 但是你挑选的数中,任何两个数a和b,必须Math.abs(a - b) > 1. 返回你最多能挑选几个数. 来自美团. 答案 ...
- Requested setting INSTALLED_APPS, but settings are not configured. You must either define the env...
解决办法 在test.py文件的最头部加上以下代码,配置环境 import os,django os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'djb ...
- 【重学C++】03 | 手撸C++智能指针实战教程
文章首发 [重学C++]03 | 手撸C++智能指针实战教程 前言 大家好,今天是[重学C++]的第三讲,书接上回,第二讲<02 脱离指针陷阱:深入浅出 C++ 智能指针>介绍了C++智能 ...
- 音容笑貌,两臻佳妙,人工智能AI换脸(deepfake)技术复刻《卡萨布兰卡》名场面(Python3.10)
影史经典<卡萨布兰卡>是大家耳熟能详的传世名作,那一首壮怀激烈,激奋昂扬的马赛曲,应当是通片最为激动人心的经典桥段了,本次我们基于faceswap和so-vits库让AI川普复刻美国演员保 ...
- 记一次处理挖矿程序引发的postgres 连接超时
近一段时间内发现自己的服务器总是警告被挖矿,然处理挖矿程序中也引发了许多其他的问题,也从中学到了其他的知识,趁今天未加班梳理一下便于巩固,记录日常 文章目录 一.查找进程 1.使用 ll /proc/ ...
- Flutter热更新技术探索
一,需求背景: APP发布到市场后,难免会遇到严重的BUG阻碍用户使用,因此有在不发布新版本APP的情况下使用热更新技术立即修复BUG需求.原生APP(例如:Android & IOS)的热更 ...
- docker升级gitlab
昨天在家部署了gitlab,版本居然是15.10,公司版本却是14.6,升级一波. 官方文档: https://docs.gitlab.com/ee/update/#upgrading-without ...
- 代码随想录算法训练营Day16二叉树|104.二叉树的最大深度 559.n叉树的最大深度 111.二叉树的最小深度 222.完全二叉树的节点个数
代码随想录算法训练营 代码随想录算法训练营Day16二叉树|104.二叉树的最大深度 559.n叉树的最大深度 111.二叉树的最小深度 222.完全二叉树的节点个数 104.二叉树的最大深度 题目 ...
- Linux设置多个Tomcat开机自启动
Linux设置多个Tomcat开机自启动 前言 一台服务器上有多个tomcat环境,重启服务器后,每次需要手动一个个启动服务,非常麻烦,于是可以设置tomcat开机自启动. tomcat开机自启动非常 ...
- CSI架构和原理
CSI CSI简介 CSI的诞生背景 K8s 原生支持一些存储类型的 PV,如 iSCSI.NFS.CephFS 等等,这些 in-tree 类型的存储代码放在 Kubernetes 代码仓库中.这里 ...