持续更新~~~

vue2 升级至vue3 注意事项

在将vue2项目手动升级至vue3时，很多vue2支持的依赖不再支持vue3，例如 vue2中的element-ui 在vue3中就要升级成element-plus。当然在用法 属性等也会有一些差别。在处理这些差别的时候，总给我一种拆迁款到了，但是气质还没上去的感觉。

import出错

前端报错

(0 , vue__WEBPACK_IMPORTED_MODULE_0__.ElNotification) is not a function

导入出错 from不对 虚线出错误

<script>与<script setup>

后端报错

ESLint: '***' is assigned a value but never used. (no-unused-vars)

前端报错

element-ui 与 element-plus

无报错问题

el-form无法输入
1.表单绑定的忘记给响应式了

const form = reactive({
  username: '',
  password: '',
});//ref 和 reactive都可

2.ref 与 v-model 值相同了

<el-form
  :model="form"
  :rules="rules"
  ref="form">
    <el-form-item prop="username" label="Email">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
</el-form>

3.在给form赋初值时赋值方法有问题 将非响应式对象赋给了form 导致无法输入字符(要被自己蠢死了QAQ)

function dialog(user)
{
  if (user.jobNumber != null) {
    form = Object.assign({}, user);
    dialogVisible.value = true;
  } 
}

后端报错

前端报错

ResizeObserver loop completed with undelivered notifications

切换路由的时候，会报上面的错误。看了些文章说是因为 element-plus 的 el-table引起的，我正好也用了。

解决方法：
在App.vue 或者 main.js中加入以下这段代码即可解决：app.vue写在script里面 main.js写在app挂载完成之后

const debounce = (fn, delay) => {
  let timer
   return (...args) => {
     if (timer) {
       clearTimeout(timer)
     }
     timer = setTimeout(() => {
       fn(...args)
     }, delay)
   }
}
  
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
   constructor(callback) {
     callback = debounce(callback, 200);
     super(callback);
   }
}

前端报错

that.$notify is not a function

在element-plus中notification用法有所不同

import {ElNotification} from 'element-plus'
function func1() {
  ElNotification({
    title: '标题',
    message: h('i', { style: 'color: teal'}, '内容')
  });
}

前端报错

Cannot read properties of undefined (reading '#<Object>')

这个报错有很多种情况:
情况一:
在vue3中检查表单 还用着vue2中的方法

//vue2
this.$refs[form].validate((valid)=> { })
//vue3
formRef.value.validate((valid) => { })

//formRef 是表单标签里的
<el-form
  :model="form"
  :rules="rules"
  ref="formRef">
    <el-form-item prop="username" label="Email">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
</el-form>

情况二:
vue3中重置表单 还用着vue2的方法

//vue2
this.$refs[form].resetFields();
//vue3
formRef.value.resetFields();
//formRef 是表单标签里的