VUE v-for 和 自定义指令 模型改变指令视图没更新的解决方法

本文章来自网络，仅仅做记录。

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

directives:{
    tap:{
        bind:function(el,binding,vnode){
            console.log(vnode)
            vnode.key = '一个唯一的id'
        }
    }
}