zoukankan      html  css  js  c++  java
  • 由一个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>
    
  • 相关阅读:
    查询已存入数据库中的图片,并显示出来
    图像插值的缺点
    windows网络服务之配置网络负载均衡(NLB)群集
    QR 码的位置检测符
    二维条码识别系统设计原理
    教你看懂Code128条形码
    DataMatrix二维条码源码分析检测识别图像位置
    C#条形码生成(五)----Web下的测试
    C# 生产成条形码3种方法
    屏蔽弹出对话框
  • 原文地址:https://www.cnblogs.com/coolicer/p/12486398.html
Copyright © 2011-2022 走看看