vue2 升级 vue3部分注意事项

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

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

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

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

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

　(2) 需要注意的是 在vue2项目中v-for和v-if在一起使用会有警告 但是在vue3项目中v-for和v-if一起使用会直接报错

　(3)vue3项目中封装的组件内 data和props不要存在同名属性 否则会出现覆盖现象(vue2中尽量也不要这么写)

 

（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  /  el-dropdown-menu  /  el-select

 

• 使用插槽必须使用template；slot=”content”改为 #content
• el-select中循环el-option时候 切记不要在:key属性内部使用函数否则会报错导致列表不显示

 

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

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

　(3) 日期时间组件

　　①旧版引入方式

<el-date-picker
      v-model="value2"
      type="date"
      placeholder="选择日期"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd">
    </el-date-picker>

　　①新版写法(注意改动比较大的是 picker-options属性变为disabled-date ; value-format和format属性的参数变动 尤其要注意大小写问题 ) 

         <el-date-picker
             v-model="params.createTimeTo"
             type="date"
             :teleported="false"
             placeholder="选择结束日期"
             :disabled-date="pickerOptionsEnd"
             format="YYYY/MM/DD"
             value-format="x"
             >
           </el-date-picker>

 

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

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

2．vant组件

　(1) van-list (需要添加修饰符)否则会多次加载数据

　　　①由原来 v-model=”loadingUp”改为 v-model:loading="loadingUp"

　(2)  van-popup 需要添加修饰符(van-popup:show)不添加修饰符不显示(代码如下)

<van-popup v-model:show="show" position="right" ></van-popup>

 

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)
      }
    }