Vue2升Vue3修改细则
-
数组操作时没有增加响应式处理,因此在watch数组的时候,需要改成 deep模式
-
for循环中必须对每个item都增加上key。否则当v-if(v-show不影响)或item数量改变时,该item的渲染结果可能有误。
-
emit相关:
-
选项式要在开头加上 emits:['方法名']
-
组合式要定义const emit = defineEmits(['方法名']);
-
emit('input') 需要改成 emit('update:modelValue')
-
-
子组件为组合式API时,获取其方法/变量,需要在子组件中 definedExpose({方法名,方法名}),子组件为选项式时无需。
-
setup函数中不可在顶层出现await,否则setup会变成异步函数,组件会变成异步组件,则需要在使用该组件的父组件中增加 <Suspense>组件,否则该组件会失效,当然这不是推荐的解决方法,推荐的解决方法是将await移入onBeforeMount或onMounted等生命周期函数中。
-
无需使用$set对新增的属性数据劫持,因为VUE2中使用Object.defineProperty()是对每个属性进行数据劫持,而VUE3中使用Proxy对整个对象进行代理,所以对对象增加属性无需再使用$set。
-
无需 const h = this.$createElement; - > 直接从 VUE3中引入import{h} from 'vue';
h('upload-progess',{属性名,值}) - > h(UploadProgress,{属性名:值})
-
插槽:
-
slot-scope -> v-slot:插槽名="row" 或 #插槽名="row"
-
slot="插槽名" -> v-slot:插槽名
-
-
路由 vue-router 3.x->4.x
import {useRouter,useRoute} from 'vue-router'; const route = useRoute(); const router = useRouter();
-
vuex 3.x->4.x
import { useStore } from 'vuex'; const store = useStore();
-
其他全局引用
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
const { $Api, $t, $bus, $message... } = instance.appContext.config.globalProperties;
-
VUE2中如果有使用this传入单独JS文件封装的方法中,VUE3需要用 getCurrentInstance().proxy 取代 this 对象,且在 this 中使用了该对象内定义的变量,getCurrentInstance().proxy 对象中获取不到,需要另外单独单独传参。
-
深层样式
::v-deep .样式名{} -> :deep(.样式名){}
-
根挂载
import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; new Vue({ router, store, render: h=>h(App) }).$mount('#app');
-
改为
import {createApp} from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; createApp(App) .use(store) .use(router) .mount('#app');
引用echarts注意:
存放chart容器应为普通对象,不可定义为ref代理对象,否则tooltips无法显示
elementUI相关改动
-
model-value / visible.sync / v-model 改成 v-model:visible
-
date-picker 组件: type=daterange 类型的 range-separate 和range-single要同时设置的话需要picker-options为空,且pickerOptions中shortcuts改成 return [start,end];
VITE相关改动
环境变量引入改为 import.meta.env.xxxx