由一个key引发的问题，vue相关

之前在做一个项目的时候，遇到一个问题。

就是加载出来的图片都像有缓存一样，然后试了在onload的时候才替换，但是后来发现。只是没有加key属性，我们平时习惯在for的时候加上，但是如果你写了自定义的组件，就会忘记加上这个属性，在做diff的时候，vue以为没有做改变，所以不会更新。但是事实上，是会更新只是比较慢。

两个月过后，我又遇到了。我做了一个兼容头像的小组件：

<template>
  <img 
    src="defalut_url"
    v-betterImage:[url]="url"
    alt="" />
</template>

<script>
let imageIsExist = function(url) {
  return new Promise((resolve) => {
    var img = new Image();
    img.onload = function () {
      if (this.complete == true){
        resolve(true);
        img = null;
      }
    }
    img.onerror = function () {
      resolve(false);
      img = null;
    }
    img.src = url;
  });
};
export default {
  props: ['url'],
  directives: {
    betterImage: {
      inserted: function(el, binding) {
        let imgURL = binding.value; // 获取图片地址
        if (imgURL) {
          imageIsExist(imgURL).then(exist => {
            if (exist)  el.setAttribute('src', imgURL);
          });
        }
      }
    }
  },
}
</script>

有一个组件引用了，使用起来一点问题都没有，但是在一个页面上，不同的组件同时用上，它的URL即使变了，还是不显示。我一开始还没有想到是key的问题，在另外一个没问题的组件，由于有key，所以是正常的。我调试了一会，看着还是没有问题。也没想到是key引起，突然想，会不会是default_url都一样导致，用上key之后居然被我解决了。

<template>
  <img 
    src="default_url"
    :key="url"
    v-betterImage:[url]="url"
    alt="" />
</template>