Vue中onload函数内对state赋值不生效问题如何解决？

问题根因 #

• this指向错误：img.onload使用普通function声明回调时，函数内部的this指向img实例而非Vue组件实例，你以为是给组件的响应式stateimgSrc赋值，实际只是给img对象新增了一个无关的imgSrc属性，完全没有修改到组件的state。
• 异步执行顺序问题：img.onload是异步回调，需要等待图片资源加载完成后才会触发，函数外层的同步代码会先执行，此时转换逻辑还没运行，无论是外层打印还是提前调用其他函数读取imgSrc，拿到的自然是初始的blob URL。

修复代码 #

基础修复版（修复this指向，回调内执行后续操作） #

// 假设value是传入的blob url prop
value = 'blob:http://localhost:8080/ca6d6419-f933-439b-8a16-62a80c81ab1a'

upload() {
  this.imgSrc = this.value;
  let img = new Image();
  img.src = this.value;
  // 用箭头函数绑定外层组件实例的this
  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0);
    const dataURI = canvas.toDataURL();
    // 此处this指向Vue组件实例，赋值会更新响应式state
    this.imgSrc = dataURI;
    console.log('imgSrc inside', this.imgSrc);
    // 所有依赖转换后imgSrc的操作都放在这里调用
    this.handleConvertedImg();
  };
  // 此处为同步执行，onload还未触发，输出blob URL属于正常现象
  console.log('imgSrc outside', this.imgSrc);
},
handleConvertedImg() {
  // 此处读取的就是转换后的data URL
  console.log('转换完成的imgSrc', this.imgSrc)
}

异步等待版（支持await等待转换完成再执行后续逻辑） #

async upload() {
  this.imgSrc = this.value;
  // 封装为Promise等待图片转换完成
  const dataURI = await new Promise((resolve) => {
    const img = new Image();
    img.src = this.value;
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      canvas.getContext('2d').drawImage(img, 0, 0);
      resolve(canvas.toDataURL());
    }
  })
  this.imgSrc = dataURI;
  console.log('转换完成的imgSrc', this.imgSrc);
  // 后续逻辑直接在此处编写即可
}

内容的提问来源于stack exchange，提问作者helpmepiliizzz