Vue2升Vue3修改细则

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