Vue2升级Vue3 --- vue变更

本文的语法变更基于gogocode篇中进行进一步说明
gogocode篇：https://blog.csdn.net/qq_44242707/article/details/122742884

一.语法变更

1.package.json

- "vue-template-compiler": "^2.6.11",
+ "@vue/compiler-sfc": "3.1.0"，
- "vue-loader": "^15.9.1",
+ "vue-loader": "^16.0.0",  //  gogocode执行命令基础上的进一步变更
- "ant-design-vue": "^1.7.2",
+ "ant-design-vue": "^2.2.8",
// vue、vuex、vue-router升级
"vue": "3.1.0",
"vue-router": "^4.0.8",
"vuex": "^4.0.2",

2.vue-loader升级

// 切换获取vue-loader操作
- const VueLoaderPlugin = require('vue-loader/lib/plugin')
+ const { VueLoaderPlugin } = require('vue-loader')

3. /deep/ => :deep()

4.插槽

1. slot、slot-scope => v-slot
2. scopedSlots替换为slots

5.对象属性监听

1. 对象属性的增加删除不具备响应性 => 对象属性的增加删除具备响应性
2. this.$set增加或删除对象属性 => 直接对对象属性增加删除，对象仍具有响应性

6.不再支持的属性或方法

1. this.$options
2. 实例的空挂载$mount()

7.Vue.extend

1. Vue2中Vue.extend创建新的vue实例 => Vue3中的createApp创建新的vue实例

二.第三方库变更

1.vue-contextmenu更换

1. 新插件：@imengyu/vue3-context-menu
2. 项目地址：https://github.com/imengyu/vue3-context-menu
3. 个性化调整：因更换插件因此需要调整样式
4. 替换方法：

package.json: vue-contextmenujs => @imengyu/vue3-context-menu
index.js: import Contextmenu from '@imengyu/vue3-context-menu'

可能问题：右键菜单事件失效
可能原因：右键菜单事件原来绑定在a-tabs。antd版本升级导致失效，需更换绑定对象为div

2.vuedraggable升级

1. 新特性：模板中只允许存在一个根节点
2. 多根节点报错：template内部包一层div，在div内部引入自定义组件可避免
3. 警告：draggable中需要绑定item-key，要根据不同element分别配置

    
        

            {{element.name}}
        
    


=>


  

3.monaco调整

1. 问题：monaco不支持Vue3数据，monaco获取数据过程导致堆栈溢出，UI卡死
2. 解决：将editor由响应式改为局部变量