vue3 VS vue2.x

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

Option API-->Compostion API

傳統(tǒng)的網(wǎng)頁是html/css/javascript（結(jié)構(gòu)/樣式/邏輯）分離。vue通過組件化的方式，將聯(lián)系緊密的結(jié)構(gòu)/樣式/邏輯放在一起，有利于代碼的維護(hù)。compostion api更進(jìn)一步，著力于JS（邏輯）部分，將邏輯相關(guān)的代碼放在一起，這樣更有利于代碼的維護(hù)。
https://mp.weixin.qq.com/s/UZGnk8vhyXuSUFhH6nXHTA

2、觀察機(jī)制

Object.defineProperty-->Proxy

• 可以檢測屬性的新增和刪除
• 可以檢測數(shù)組索引的變化和 length 的變化
• 支持 Map、Set、WeakMap 和 WeakSet

Proxy是代理在對象級別的，defineProperty是代理到靜態(tài)的值級別。
二者的具體差異分析可看https://segmentfault.com/a/1190000038597103

3、Diff算法提升

新增靜態(tài)標(biāo)記（patchflag）與上次虛擬節(jié)點(diǎn)對比時(shí)，只對比帶有patch flag的節(jié)點(diǎn)（動(dòng)態(tài)數(shù)據(jù)所在的節(jié)點(diǎn)）；可通過flag信息得知當(dāng)前節(jié)點(diǎn)要對比的具體內(nèi)容。
cpu占用為vue2.x的十分之一

4、支持ts

vue3 借鑒了react hook實(shí)現(xiàn)了更自由的編程方式，提出了Composition API，Composition API不需要通過指定一長串選項(xiàng)來定義組件，而是允許用戶像編寫函數(shù)一樣自由地表達(dá)、組合和重用有狀態(tài)的組件邏輯，同時(shí)提供出色的TypeScript支持。

5、打包體積變化

在Vue 3中，我們通過將大多數(shù)全局API和內(nèi)部幫助程序移動(dòng)到Javascript的module.exports屬性上實(shí)現(xiàn)這一點(diǎn)。這允許現(xiàn)代模式下的module bundler能夠靜態(tài)地分析模塊依賴關(guān)系，并刪除與未使用的module.exports屬性相關(guān)的代碼。模板編譯器還生成了對樹抖動(dòng)友好的代碼，只有在模板中實(shí)際使用某個(gè)特性時(shí)，該代碼才導(dǎo)入該特性的幫助程序。
盡管增加了許多新特性，但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

提供基本項(xiàng)目腳手架和開發(fā)服務(wù)器的構(gòu)建工具。

結(jié)論：vite適合小項(xiàng)目、快應(yīng)用

自動(dòng)升級

自動(dòng)升級工具 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

以后臺項(xiàng)目training-admin為例，某些第三方依賴不兼容vue3，core-js報(bào)錯(cuò)，建議只遷移源文件

手動(dòng)升級

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: {
    // 使用解構(gòu)賦值，參數(shù)列表{commit,state}
    setLogin({ commit }, userInfo) {
      // commit 調(diào)用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滑塊插件不支持
  ......
  其它組件還未嘗試