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

宁波阿成

已于 2024-08-04 11:00:28 修改

阅读量593

点赞数 5

CC 4.0 BY-SA版权

分类专栏： ruoyi-nbcio-plus vue3 前端vue 文章标签： flowable ruoyi-nbcio 前端 vue3

于 2024-04-03 14:14:00 首次发布

本文链接：https://blog.csdn.net/qq_40032778/article/details/137028223

前端vue 同时被 3 个专栏收录

145 篇文章

订阅专栏

142 篇文章

订阅专栏

ruoyi-nbcio-plus

57 篇文章

订阅专栏

本文总结了从Vue2升级到Vue3过程中需要注意的关键变化，包括属性处理、ref与shallowRef的区别、watch用法更新、v-model的新用法等，并介绍了Element和ElementPlus框架的相关调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更多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

接上一节

8、对于哪些属性可能不存在的情况下最好用？来进行前段处理

比如

bpmnElementProperties.value =
      bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => {
        if (ex.$type !== `${prefix}:Properties`) {
          otherExtensionList.value.push(ex)
        }
        return ex.$type === `${prefix}:Properties`
      }) ?? []

9、ref与shallowRef的区别

shallowRef和ref的区别在于： ref可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象，但shallowRef定义对象（或数组）类型数据时，它不会通过reactive转为代理对象。

简单来说，如果你有一个对象并希望它作为一个整体被跟踪响应式，那么应该使用ref。如果你只想跟踪对象的引用，不深入跟踪其内部属性，那么应该使用shallowRef。

10、watch

对于vue3的watch最好还是放到后面，onBeforeUnmount之前，否则可能会出现一些意想不到的问题。

同时可以多个watch，如下：

watch(
    () => props.id,
    () => {
      bpmnElement.value = bpmnInstances().bpmnElement
      nextTick(() => {
        resetTaskForm()
      })
    },
    { immediate: true }
  )
  watch(
    // 根据名称筛选部门树
    () => deptName.value,
    (val) => {
      console.log("watch deptName",deptName)
      console.log("watch tree",tree)
      tree.value?.filter(val);
    }
  )

11、组件上 v-model 用法已更改，以替换 v-bind.sync

12、在同一元素上使用的 v-if 和 v-for 优先级已更改

13、v-bind=“object” 现在排序敏感

14、v-on:event.native 修饰符已移除

15、destroyed 生命周期选项被重命名为 unmounted

16、beforeDestroy 生命周期选项被重命名为 beforeUnmount

17、Element 和 Element Plus 框架也有所修改，需要查询官方相关资料

18、异步组件现在需要使用 defineAsyncComponent 方法来创建