vue2升级到vue3的一些使用注意事项记录(一)

简介: vue2升级到vue3的一些使用注意事项记录(一)

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://218.75.87.38:9888

1、查看包版本信息

npm view [package_name] versions

2、VUE3里要混合ts与vue技术代码相互调用,需要在vite.config.ts设置如下

server: {

     hmr: {

       overlay: false,

     },

3、vue3的plus中的el-tooltip 原来具名插槽的修改成如下template

<template>
  <el-tooltip placement="top">
    <template #content> multiple lines<br />second line </template>
    <el-button>Top center</el-button>
  </el-tooltip>
</template>

4、响应式数转换成非响应式数据,就是VUE3 proxy类型转成普通对象

   一种是用toRaw,如const appType = toRaw(props.appType);

   另外一种是const appType = JSON.parse(JSON.stringify(props.appType));

5、模板里的ref使用

要早setup里创建相同名称的ref,如:

<el-col :span="17">
          <el-table ref="multipleTable" height="600" :data="userTableList" border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="用户名" align="center" prop="nickName" />
            <el-table-column label="部门" align="center" prop="dept.deptName" />
          </el-table>
          <pagination
            :total="userTotal"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getUserList"
          />
        </el-col>

就要定义相同名称的,如const multipleTable = ref(null)

就可以用multipleTable.value进行访问了

// 关闭标签
  const  handleClose = (tag) => {
      selectedUserDate.value.splice(selectedUserDate.value?.indexOf(tag), 1);
      multipleTable.value.toggleRowSelection(tag);
  }

6、一些全局变量的使用

const { proxy } = getCurrentInstance() as ComponentInternalInstance

如:proxy?.$modal.msgSuccess(text + "成功");

7、element-plus的对话框显示需要修改了

<!-- 候选用户弹窗 -->

   <el-dialog title="候选用户" :visible.sync="userOpen" width="60%" append-to-body>

原先一般用:visible.sync,但这样不显示了,需要用v-model

<el-dialog title="候选用户" v-model="userOpen" width="60%" append-to-body>

否则会不显示

相关文章
|
1月前
|
缓存 JavaScript 前端开发
Vue3与Vue2生命周期对比:新特性解析与差异探讨
Vue3与Vue2生命周期对比:新特性解析与差异探讨
91 2
|
3月前
|
JavaScript 前端开发
Vue入门记录(一)
Vue入门记录(一)
39 0
|
6月前
|
移动开发 前端开发
vue2升级到vue3的一些使用注意事项记录(二)
vue2升级到vue3的一些使用注意事项记录(二)
99 1
|
6月前
|
JavaScript 前端开发
vue2升级到vue3的一些使用注意事项记录(四)
vue2升级到vue3的一些使用注意事项记录(四)
117 0
|
6月前
|
移动开发 前端开发
vue2升级到vue3的一些使用注意事项记录(三)
vue2升级到vue3的一些使用注意事项记录(三)
64 0
|
6月前
|
JavaScript 前端开发 算法
Vue3与Vue2:对比分析与迁移指南
Vue3与Vue2:对比分析与迁移指南
|
存储 资源调度 JavaScript
深入探索Vuex:Vue.js官方状态管理库的全面指南(上)
深入探索Vuex:Vue.js官方状态管理库的全面指南
|
6月前
|
存储 JavaScript
vue组件使用中的常见问题
vue组件使用中的常见问题
|
JavaScript
6、Vue 开发的注意事项
6、Vue 开发的注意事项