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

27、ue3 已经不支持 $listeners 了,已经启用了,是事件监听器现在是 $attrs 的一部分

28、在 Vue 3 中,通知组件(例如 $notification)可能不在内置于 Vue 核心库中

所以需要使用第三方的notification了,比如element-plus的是ElNotification,如下:

ElNotification({ //websocket消息通知弹出
        title: 'websocket消息通知',
        message: data.msgTxt,
        type: 'success',
        duration: 1000
      })

29、vue3子组件暴露方法用

 defineExpose({

   方法

 });

30、vue3插槽的使用

const instance = getCurrentInstance();

在 Vue 3 中,应该尽量避免使用 this,因为这是针对 Vue 2 实例的。在 Vue 3 中,应该使用 getCurrentInstance 来获取当前组件的实例,并访问相关的插槽。

31、vue3需要注意的是方法名称千万不能跟文件名称相同,否则会出现莫名其妙的问题,对象会访问不到。

32、vue自3.4版本以后,组件间数据双向绑定推荐使用defineModel()宏来实现,而不是用之前做法。

33、对于a-table下面的vue3版本,//selectedRowKeys: selectedRowKeys, 这行不注释选择出现问题

/**
   * 跳转节点列表选择
   */
  const rowSelection = {
    //selectedRowKeys: selectedRowKeys, //selectedRowKeys 可设置默认被选中项(就是表格一打开就被选中的项) 指定选中项的 key 数组,需要和 onChange 进行配合 string[]
    onChange: (selectedRowKeys: any, selectedRows: any) => {  // onChange 选中项发生变化时的回调
      selectedJumpRowKeys.value = selectedRowKeys;
      selectedJumpRows.value = selectedRows
    },
    type: "radio", // 单选
  };

34、另外要是全局用selectedRowKeys变量的话,后续访问出现问题,所以后来修改成

     selectedJumpRowKeys.value = selectedRowKeys;

     selectedJumpRows.value = selectedRows

/**
   * 跳转节点列表选择
   */
  const rowSelection = {
    //selectedRowKeys: selectedRowKeys, //selectedRowKeys 可设置默认被选中项(就是表格一打开就被选中的项) 指定选中项的 key 数组,需要和 onChange 进行配合 string[]
    onChange: (selectedRowKeys: any, selectedRows: any) => {  // onChange 选中项发生变化时的回调
      selectedRowKeys.value = selectedRowKeys;
      selectedRows.value = selectedRows
    },
    type: "radio", // 单选
  };


相关文章
|
22天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
19天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
44 7
|
20天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
39 3
|
19天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
36 1
|
19天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
39 1
|
21天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
22天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
9天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
9天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
9天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。