1024 —— 实习总结

      已经实习产不多半个月了，自己已经开始写需求了，这段时间充满挑战与压力，在周末加班两天的基础上，今天上班已经感觉身体有些吃不消了，还没下班就挺累了，脑子转不动了，但是后端抛了一块接口，还得对接，继续搬砖吧年轻人。

       刚开始来公司第一个礼拜就是完成带我那个组长给我布置的练习任务，虽然期间又遇到过问题，但是自己都尝试解决，也问过组长，也算是完成的比较圆满，组长看还不错，直接丢我区项目中锻炼，直接从vue2跳到vue3，只要vue2基础好其实也不难，下来写写工作遇到的一下问题吧。

vue @click.native和@click.stop和@click.self

<!-- 阻止单击事件冒泡 -->

<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

js中“??“和“?.“怎么用？

？？：空值合并操作符

逻辑操作符，左侧为null和undefined时，才返回右侧的数

const sum = null ?? 12
console.log(sum);
//输出12

?. :可选链操作符

可以读取位于连接对象链深处属性的值，不必明确验证链中的每个引用是否有效

const fa = {
      name: 'lming',
      son: {
        name: 'lqq'
      }
    };
const duc = fa.duc?.name;
console.log(duc);
//输出undefined

vue3的proxy（全局方法的挂载以及setup时的使用）

vue3.0的时候如果用组合api，由于 setup 在生命周期 beforecreate 和 created 前执行，此时 vue 对象还未创建，因无法使用我们在 vue2.x 常用的 this。
那就用 getCurrentInstance代替this，首先引入，之后声明如下：

三点运算符与es6的Object.assgin()

{...obj}、Object.assgin(target,newObj)都是只能Clone一层，并不是实际意义上的深拷贝

VUE3响应式API之reactive，重新赋值时候得要注意不能赋值新的相同类型数据，会覆盖掉响应式数据

const arr = reactive([]);
const load = () => {
  const res = [2, 3, 4, 5]; //假设请求接口返回的数据
  // 方法1 失败，直接赋值丢失了响应性
  // arr = res;
  // 方法2 这样也是失败
  // arr.concat(res);
  // 方法3 可以，但是很麻烦
  res.forEach(e => {
    arr.push(e);
  });
};

 

　问题原因：这是因为 arr = newArr这行代码让arr失去了响应式。vue3 使用proxy，对于对象和数组都不能直接整个赋值。

具体原因：reactive声明的响应式对象被 arr 代理，操作代理对象需要有代理对象的前缀，直接覆盖会丢失响应式。

 form表单的resetFields()重置方法以及nextTick()

resetFields()

理解：并不是将表单清空，而是将表单置为初始值，在组件尚未挂在时候之前赋的值都会被当做初始值，所以我们想要在此基础上清空就要用到$nextTick()回调函数，在DOM挂在完成之后再赋值，此时的值就不在是初始值

 文件流类型Bolb

请求文件流时候得设置responseType：'blob',之后通过new Bolb将返回的res创建成Bolb对象，通过window.URL.createObjectURL解析成本地文件地址，就可以通过url访问了

 showBoImage(row) {
      const fm = new FormData()
      fm.append('operateId', row.id)
      lookBoImage(fm).then((res) => {
        if (res.size) {
          const url = window.URL.createObjectURL(
            new Blob([res], { type: 'image/png' })
          )
          window.open(url)
        } else {
          this.$message({
            showClose: true,
            message: '请先上传非仓库责任说明，再查看图片',
            type: 'warning'
          })
        }
      })
    }
    
// 查询Bo详情的查看图片
export const lookBoImage = (data) => {
  return request({
    url: '/wmsapi/warehouse/pickinglist/getResponsibilityFile',
    method: 'post',
    responseType: 'blob',
    data
  })
}