从vue2.0到3.0需要做哪些改变

官方文档
https://staging-cn.vuejs.org/guide/introduction.html#what-is-vue
https://v3.cn.vuejs.org/guide/installation.html#vite

webpack --》vite

npm init vite@latest <project-name> --template vue-ts //ts工程，js工程不加-ts

main.ts文件(包括引入element-plus、router、pinia等)

import { createApp } from 'vue'
import App from './App.vue'
// 整体引入
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import router from "./router/index";
import { createPinia} from 'pinia';
// UI样式
import '@/styles/index.scss';

const app = createApp(App);
app.use(router).use(ElementPlus, { size: 'default', zIndex: 3000 })
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
app.use(createPinia())
app.mount("#app");

vue-router 升级到 4.0

具体用法会开新章节
router.ts文件

import { createRouter, createWebHashHistory,  RouteRecordRaw } from 'vue-router';

export const Layout = () => import('@/view/app-layout/index.vue');

// 静态路由
export const constantRoutes: Array<RouteRecordRaw> = [
  {
    path: '/redirect',
    component: Layout,
    meta: {
      hidden: true
    },
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/view/redirect/index.vue')
      }
    ]
  },
  {
    path: "/login",
    component: () => import("@/view/login/index.vue"),
    meta: {
      hidden: true
    }
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/view/dashboard/index.vue'),
        name: 'Dashboard',
        meta: { title: 'dashboard', icon: 'TrendCharts', affix: true }
      }
    ]
  }
];


// 创建路由
const router = createRouter({
  history: createWebHashHistory(),
// hash模式：createWebHashHistory，history模式：createWebHistory
  routes: constantRoutes,
  // 刷新时，滚动条位置还原
  scrollBehavior: () => ({ left: 0, top: 0 })
});

// 重置路由
export function resetRouter() {
  router.getRoutes().forEach(route => {
    const { name } = route;
    if (name && router.hasRoute(name)) {
      router.removeRoute(name);
    }
  });
}

export default router;

vuex --》pinia

取消了mutations，同步异步都在actions中，更简洁，下节更新pinia
官方 https://pinia.vuejs.org/introduction.html#basic-example

生命周期的变化

没有了created
onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码

vue2 （vue3选项写法可用）	vue3
beforeCreate	Not needed*
created	Not needed*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

data的定义

使用reactive函数创建一个响应式对象或数组

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })

function increment() {
  state.count++
}
</script>

<template>
  <button @click="increment">
    {{ state.count }}
  </button>
</template>

ref方法来允许我们创建可以使用任何值类型的响应式 ref

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }} <!-- 无需 .value -->
  </button>
</template>

⚠️注意区别，一个使用时候有value，一个没有

style

::v-deep写法已经被废弃了，使用:deep(xx)

:deep(.el-drawer__header) {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 0;
}

可能遇到的坑

1、⚠️注意重名问题，3.0对重名检查严格，变量不要重名，哪怕是父子也有可能造成错误
2、路由或者path地址不可以带有*之类的字符
3、使用element-plus注意看文档，有些属性已废弃

持续更新中。。。。。