【学习前端第六十五课】vue框架中的key详解

-Wake-

于 2024-01-21 10:31:38 发布

阅读量1k

点赞数 25

分类专栏：【前端】入门到就业文章标签： vue.js 前端学习

本文链接：https://blog.csdn.net/weixin_65729202/article/details/135692004

版权

文章讲述了在Vue中使用key的注意事项，特别是在动态渲染时，为何不应使用索引作为key，以及如何通过使用`item.sid`作为key来解决状态管理和性能问题。还提供了一个示例演示了如何在列表过渡动画中正确应用key。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue框架中的key详解

之前我们在左列表渲染的时候，包括现在我们做的过渡动画，我们都看到了一个key，之前给大家讲key的时候说过key的值不能重复，所以我们一直在做索引作为key的值

不推荐使用index的值作为key的值

如果执行的时静态渲染，则使用index作为key其实也还好，但是如果执行的是动态渲染，则index千万不能作为key的值使用，否则vue内部的状态机制容易出错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,inde) in stuList" :key="index">
                学号：{
  {item.sid}} ------ 姓名:{
  {item.sname}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
     
        el:"#app",
        data:{
     
            stuList:[
                {
     sid:"001",sname:"zhangsan"},
                {
     sid:"002",sname:"lisi"},
                {
     sid:"003",sname:"wangwu"}
            ]

最低0.47元/天解锁文章