vue v-for就地复用机制导致directive自定义指令不刷新

Vue的v-for在更新列表时采用就地复用策略,可能导致自定义指令不刷新。官方建议通过赋予元素唯一key来强制DOM渲染。本文探讨了这个问题,并分享了一种在自定义指令内部解决该问题的方法,利用vnode的key属性实现DOM刷新。

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

最近发现了一个问题,自定义指令和v-for共用,v-for的数据发生变化时,自定义指令传的参数并没有改变,还是第一次渲染是的参数,大概是这样的:
<template>
    <ul>
        <li v-for="item in list" v-tap="item">{{ item }}</li>
    </ul>
</template>
<script>
    data(){
        return{
            list:[ 1,2,3,4,5 ],
            list1:[ 'a','b','c','d' ]
        }
    },
    directives:{
        tap:{
            bind:function(el,binding){
            console.log(binding.value)
            //第一次渲染时,打印的是1,2,3,4
            //当list的值变成list1的值是,没有重新打印 
            //也就是说,dom没有重新渲染,指令里接收的值还是1,2,3,4
            }
        }
    }
</script>

为什么dom没有重新渲染呢,这源于v-for的就地复用机制
官方的解释是:
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by=”$index” 。

这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值 (在这里使用简写):

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

简单来说就地复用就是能继续用的dom就不重新渲染,这就导致了自定义指令传参一直是第一次渲染的数据,我试了一下官方的解决方案,确实可以,dom被强制渲染了,后来我想找一种自定义指令里就可以解决的方法,还真让我找到了,自定义指令钩子函数的第三个参数vnode:Vue 编译生成的虚拟节点。
打印这个虚拟节点里面有一个key,这个key就是上面说到的key,只要给他赋一个唯一的id,就可以强制dom刷新了

directives:{
    tap:{
        bind:function(el,binding,vnode){
            console.log(vnode)
            vnode.key = '一个唯一的id'
        }
    }
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值