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 参考之前分享博客

相关推荐
花海少爷7 分钟前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd79411 分钟前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You19 分钟前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生31 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_3842410933 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap1 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish1 小时前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull1 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
菜牙买菜1 小时前
让安卓也能玩出Element-Plus的表格效果
前端
请叫我欧皇i1 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript