vue3 VS vue2.x

1、Compostion API: 组合API/注入API

Option API-->Compostion API

传统的网页是html/css/javascript（结构/样式/逻辑）分离。vue通过组件化的方式，将联系紧密的结构/样式/逻辑放在一起，有利于代码的维护。compostion api更进一步，着力于JS（逻辑）部分，将逻辑相关的代码放在一起，这样更有利于代码的维护。
https://mp.weixin.qq.com/s/UZGnk8vhyXuSUFhH6nXHTA

2、观察机制

Object.defineProperty-->Proxy

• 可以检测属性的新增和删除
• 可以检测数组索引的变化和 length 的变化
• 支持 Map、Set、WeakMap 和 WeakSet

Proxy是代理在对象级别的，defineProperty是代理到静态的值级别。
二者的具体差异分析可看https://segmentfault.com/a/1190000038597103

3、Diff算法提升

新增静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息得知当前节点要对比的具体内容。
cpu占用为vue2.x的十分之一

4、支持ts

vue3 借鉴了react hook实现了更自由的编程方式，提出了Composition API，Composition API不需要通过指定一长串选项来定义组件，而是允许用户像编写函数一样自由地表达、组合和重用有状态的组件逻辑，同时提供出色的TypeScript支持。

5、打包体积变化

在Vue 3中，我们通过将大多数全局API和内部帮助程序移动到Javascript的module.exports属性上实现这一点。这允许现代模式下的module bundler能够静态地分析模块依赖关系，并删除与未使用的module.exports属性相关的代码。模板编译器还生成了对树抖动友好的代码，只有在模板中实际使用某个特性时，该代码才导入该特性的帮助程序。
尽管增加了许多新特性，但Vue 3被压缩后的基线大小约为10 KB，不到Vue 2的一半。

...

更多修改：https://bbs.huaweicloud.com/blogs/300280?utm_source=zhihu&utm_medium=bbs-ex&utm_campaign=other&utm_content=content

兼容vue2.x升级vue3

vite还是vue-cli

提供基本项目脚手架和开发服务器的构建工具。

结论：vite适合小项目、快应用

自动升级

自动升级工具 gogocode-cli

npm install gogocode-cli -g
//迁移源文件
gogocode -s ./src -t gogocode-plugin-vue -o ./src-out
//依赖升级
gogocode -s package.json -t gogocode-plugin-vue -o package.json

以后台项目training-admin为例，某些第三方依赖不兼容vue3，core-js报错，建议只迁移源文件

手动升级

1、升级vue-cli@5.0.4
npm i -g @vue/cli

2、配置vue-router
npm install vue-router@4

routers.js

const ROUTER = [
  { path: "/", redirect: "/index" },
  {
    path: '/index',
    name: 'index',
    component: () => import('./views/HelloWorld.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('./views/LoginName.vue')
  },
]

export default ROUTER

main.js

mport { createApp } from 'vue'
import App from './App.vue'
import { createRouter,createWebHashHistory} from "vue-router";
import routerMap from './routers'

const router = createRouter({
  history: createWebHashHistory(),
  routes:routerMap, 
})
const app = createApp(App);
app.config.productionTip = false;
app.use(router).mount('#app')

HelloWorld.vue

<script>
import { useRouter } from 'vue-router'
export default {
  name: 'HelloWorld',
  setup () {
    const router = useRouter()
    const toLogin = (() => {
      router.push({
        name: 'login'
      })
    })
    return {
      toLogin
    }
  },
}
</script>

3、配置Vuexnpm install vuex@next --save

store/index.js

import { createStore } from 'vuex'

const store = createStore({
  state: {
    // 全局变量定义
    userInfo: '', // 用于存放登录信息
    hasLogin: false,
  },
  mutations: {
    login(state, userInfo) {
      state.hasLogin = true
      state.userInfo = userInfo
    },
    logout(state) {
      sessionStorage.removeItem('userInfo')
      state.hasLogin = false
      state.userInfo = ''
    },
  },
  actions: {
    // 使用解构赋值，参数列表{commit,state}
    setLogin({ commit }, userInfo) {
      // commit 调用mutations的方法
      commit('login', userInfo)
      sessionStorage.setItem('userInfo', userInfo)
    },
    setLogout({ commit }) {
      commit('logout')
      sessionStorage.removeItem('userInfo')
    },
  },
})
export default store

main.js

import store from './store/index'

app.use(store).mount('#app')

4、配置axiosnpm install --save axios vue-axios

5、webpack配置

image.png

5、其它配置

• vue-beauty 不支持vue3 改为使用ant-design
• nc滑块插件不支持
  ......
  其它组件还未尝试