Vue2升级Vue3填坑笔记

背景

前段时间使用Vue2完成一个流量回放的前端开发,实现了流量回放的基本功能。开发过程中,发现现主流的插件都在适配Vue3,奈何为了赶进度,只能先用自己熟悉的Vue2先顶上。恰巧最近有些许空余时间,就把项目代码逐步变更Vue3了。过程中,顺便梳理了下遇到的差异,为后面做些许积累与经验参考。

差异处理

element常见差异:

  1. deleteset在vue3中不再使用,可以直接将对应的值设置为null

  2. router引入:

    • Vue2

      js 复制代码
      import Router from 'vue-router' 
    • Vue3

      js 复制代码
      import {createRouter, createWebHistory} from "vue-router"
  3. 使用router的history功能,需要添加属性, 指定路径

    js 复制代码
    import {createRouter, createWebHistory} from "vue-router";
    const router = createRouter({
      history: createWebHistory('/'),
      routes : []})
    export default router
  4. 从url中获取参数。在 Vue 2 中,$route 是一个全局属性,但在 Vue 3 中它已被弃用,取而代之的是 useRoute()

    • vue2

      js 复制代码
      this.recordId = this.$router.history.current.params.id
    • vue3

      js 复制代码
      import { useRoute } from 'vue-router';
      
      const route = useRoute();
      this.collectionId = route.params.id;
      console.log(`录制任务ID:${this.collectionId}`);
  5. 处理eslint声明后未使用的报错(vue3解决no-unused-vars报错),修改eslintConfig规则

    json 复制代码
    {     
        "eslintConfig": {
            "root": false,
            "env": {
                "node": true
            },
            "extends": [
                "plugin:vue/vue3-essential",
                "eslint:recommended"
            ],
            "parserOptions": {
                "parser": "@babel/eslint-parser"
            },
            "rules": {
                "no-unused-vars": [
                    "error",
                    {
                        "varsIgnorePattern": ".*",
                        "args": "none"
                    }
                ]
            }
        },
        "browserslist": [
            "> 1%",
            "last 2 versions",
            "not dead",
            "not ie 11"
        ]
    }
  6. :visible.sync 变为 v-model

  7. 自定义按钮弹出框内容:

    • Vue2

      js 复制代码
      <el-popconfirm
           title="是否确定删除?"
           confirm-button-text="确定"
           cancel-button-text="取消"
         @confirm="deleteCollectData(scope.row.id)"
      >
      <el-button slot="reference" type="text" size="small">删除
      </el-button>
      </el-popconfirm>
    • Vue3

      js 复制代码
      <el-popconfirm
          title="是否确定删除?"
          confirm-button-text="确定"
          cancel-button-text="取消"
          @confirm="deleteCollectData(scope.row.id)"
      > <template #reference>
        <el-button type="primary" size="small">删除
        </el-button></template>
  8. DatePicker

    • vue2:

      js 复制代码
      <el-date-picker
         v-model="form.executionTime"
         type="datetime"
         format="yyyy-MM-dd HH:mm:ss"
         value-format="yyyy-MM-dd HH:mm:ss"
         placeholder="选择日期时间"
         :picker-options="pickerOptionsStart"
      />
    • vue3:

      js 复制代码
      <el-date-picker
          v-model="form.executionTime"
          type="datetime"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="选择日期时间"
      />
  9. el-table表格数据中的取值方式:

    • vue2

      js 复制代码
      <el-table :data="tableData" style="width: 100%">
          <el-table-column label="Date" width="180">
             ----------- <template slot-scope="scope"> -----------
              <div style="display: flex; align-items: center">
                <el-icon><timer /></el-icon>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </div>
            </template> 
          </el-table-column>
      </el-table>
    • vue3

      vue 复制代码
      <el-table :data="tableData" style="width: 100%">
          <el-table-column label="Date" width="180">
             ----------- <template #default="scope"> -----------
              <div style="display: flex; align-items: center">
                <el-icon><timer /></el-icon>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </div>
            </template> 
          </el-table-column>
      </el-table>
  10. 表格数据过滤条件

    • vue2

      vue 复制代码
      <template slot="header" slot-scope="scope"></template>
    • vue3

      vue 复制代码
      <template #header></template>
  11. :value.sync页面取值为变量

    • vue2

      vue 复制代码
      <my-component :value.sync="data"></my-component>
    • vue3

      vue 复制代码
      <my-component v-model:data="data"></my-component>
  12. el-link组件在vue2中,需要使用#:
    <el-link type="primary" :href="'#/replay/jobDetail/'+replay.taskId">{``{ replay.taskName }}</el-link>

    在vue3中:
    <el-link type="primary" :href="'/replay/jobDetail/'+replay.taskId">{``{ replay.taskName }}</el-link>

  13. slot= Vue2、Vue3中的差异 footer、extra

    • vue2

      vue 复制代码
      <div slot="footer" class="dialog-footer"></div>
    • vue3

      vue 复制代码
      <template #footer>
          <div class="dialog-footer"></div>
      </template>
    • vue2

      vue 复制代码
      <el-descriptions class="margin-top" title="任务配置" :column="3">
          <template slot="extra"></template>
      </el-descriptions>
    • vue3

      vue 复制代码
      <el-descriptions class="margin-top" title="任务配置" :column="3">
          <template #extra></template>
      </el-descriptions>
  14. 异常处理:

    1. Invalid prop: validation failed. Expected one of ["", "default", "small", "large"], got value "mini".

      修改vue2中的size='mini'size='small'

    2. element-plus type.text is about to be deprecated in version 3.0.0, please use link instead.

      element-button的type='text'属性已移除。

    3. ResizeObserver loop completed with undelivered notifications 解决改报错,需要修改app.vuemain.js两个文件:

      • app.vue:

        vue 复制代码
        <template>
        <!--  <img alt="Vue logo" src="./assets/logo.png">-->
        <!--  <HelloWorld msg="Welcome to Your Vue.js App"/>-->
          <main>
            <RouterView />
          </main>
        </template>
        
        <script>
        // 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);
           }
        }
        
        </script>
        
        <style>
        #app {
          font-family: Avenir, Helvetica, Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-align: center;
          color: #2c3e50;
          margin-top: 60px;
        }
        </style>
      • main.js:

        vue 复制代码
        import {createApp} from 'vue'
        
        const app = createApp(App)
        app.mount('#app')
        
        // 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);
           }
        }
    4. vcrontab 只适用于vue2,在vue3中可以使用vue3-cron-plus no-vue3-cron 参考之前分享博客

    5. vue-jsonpath-picker只适用于Vue2,在Vue3中可以使用vue-json-pretty 参考之前分享博客

相关推荐
mosen8685 分钟前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai2 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书