vue2 升级 vue3部分注意事项

备注：部分升级时遇到的问题简单整理（后续补充）

一）部分方法转化:参考（升级指南：https://gogocode.io/zh/docs/vue/vue2-to-vue3）

（1）Filters（过滤器在vue3中已经废弃）

①全局混入的过滤器将filters转化成方法（methods）

②局部过滤器就在当前页面进行转化成方法（避免方法重名）也可以转换成计算属性；

（1）路由使用更新

①路由使用方法

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> =[]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

①路由从定向（新写法）

1：第一种写法  
{
   path: "/:catchAll(.*)",
   redirect: "/talentInfor"
},
2：第二种写法
  {
    path: "/:pathMatch(.*)",
    redirect: "/login"
  }

3：第三种写法
{
    path: "/:pathMatch(.*)*",
    redirect: "/login"
}

（1）Vuex使用更新

①新的使用方法

import { createStore } from 'vuex'
// import { constStore } from './module/const'
import saveInLocal from './plugin/saveInLocal'
// 引入持久化
import createPersistedState from 'vuex-persistedstate';
export default createStore({
  state: {
    page:{
      limit:10,
    },
    username:'',
    'constStore':{
      limitPage:10, //全局配置默认分页条数
  }
  },
  mutations: {
    usernameCommit:(state,value)=>{
      state.username=value;
    }
  },
  actions: {
  },
  modules: {
  },
   //持久化数据
   plugins: [
    createPersistedState({
        key: 'vuex', // 存储是的名字
        // 也可以是sessionstorage
        storage: window.localStorage
    })
]
})

①支持原有使用方法例如

this.$store.state.username

①新的使用方法

import { useStore } from 'vuex'
export default {
  setup(){
    const store = useStore();
    onMounted(()=>{
      console.log(store)
    })
  }
}

二）组件更新

（1）https://gogocode.io/zh/docs/vue/element-ui-to-element-plus

（2）整体样式覆盖问题（当前项目进行区分整理）

（3）局部引入element-plus

①旧的引入方式

import { MessageBox, Message , Loading  } from 'element-ui'

①新的引入方式（前缀添加EL）

import { ElMessageBox,ElMessage,ElLoading } from 'element-plus'

（1）组件默认显示英文问题

①第一步引入中文包

import zhCn from 'element-plus/lib/locale/lang/zh-cn'

①第二部引入

app.use(ElementPlus,{locale: zhCn});

（1）el-tooltip

①使用插槽必须使用template；slot=”content”改为 #content

（2）插槽使用更新(el-table)

①由原来 slot=”title”改为 #title ;slot-scope=’’scope’’ 改为 #default=”scope”

1．Iview 》iview3 升级指南（参考）

（1）https://gogocode.io/zh/docs/vue/iview-upgrade-sample

2．

3．复制组件

（1）安装 vue-clipdoard3

①代码使用

<button square text="复制" type="success" class="delete-button"  @click="copy">Copy</button>
//引入 复制版
import useClipboard from 'vue-clipboard3'
    // 剪切板使用
    const { toClipboard } = useClipboard()

    const text = ref('123')

    const copy = async () => {
      try {
        await toClipboard(text.value)
        console.log('Copied to clipboard')
      } catch (e) {
        console.error(e)
      }
    }