Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架，與其它大型 JS 框架不同，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用，更易上手，還便于與第三方庫(kù)或既有項(xiàng)目整合，因此，Vue完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。

2020年09月18日，Vue.js 3.0 正式發(fā)布，作者尤雨溪將其描述為：更快、更小、更易于維護(hù)。

Vue 3都加入了哪些新功能？

本次發(fā)布， Vue框架本身迎來(lái)了多項(xiàng)更新，如Vue 此前的反應(yīng)系統(tǒng)是使用 Object.defineProperty 的 getter 和 setter。 但是，在 Vue 3中，將使用 ES2015 Proxy 作為其觀察者機(jī)制，這樣做的好處是消除了以前存在的警告，使速度加倍，并節(jié)省了一半的內(nèi)存開(kāi)銷(xiāo)。

除了基于 Proxy 的觀察者機(jī)制，Vue 3的其他新特性還包括：

1. Performance（性能提升）

在Vue 2中，當(dāng)某個(gè)DOM需要更新時(shí)，需要遍歷整個(gè)虛擬DOM樹(shù)才能判斷更新點(diǎn)。而在Vue 3中，無(wú)需此項(xiàng)操作，僅需通過(guò)靜態(tài)標(biāo)記，對(duì)比虛擬節(jié)點(diǎn)上帶有patch flag的節(jié)點(diǎn)，即可定位更新位置。

對(duì)比Vue 2和Vue 3的性能差異，官方文檔中給出了具體數(shù)據(jù)說(shuō)明：

· SSR速度提高了2~3倍

· Update性能提高1.3~2倍

2. Composition API（組合API）

Vue 2中有data、methods、mounted等存儲(chǔ)數(shù)據(jù)和方法的對(duì)象，我們對(duì)此應(yīng)該不陌生了。比如說(shuō)要實(shí)現(xiàn)一個(gè)輪播圖的功能，首先需要在data里定義與此功能相關(guān)的數(shù)據(jù)，在methods里定義該功能的方法，在mounted里定義進(jìn)入頁(yè)面自動(dòng)開(kāi)啟輪播的代碼…… 有一個(gè)顯而易見(jiàn)的問(wèn)題，就是同一個(gè)功能的代碼卻要分散在頁(yè)面的不同地方，維護(hù)起來(lái)會(huì)相當(dāng)麻煩。

為了解決上述問(wèn)題，Vue 3推出了具備清晰的代碼結(jié)構(gòu)，并可消除重復(fù)邏輯的 Composition API，以及兩個(gè)全新的函數(shù)setup和ref。

Setup 函數(shù)可將屬性和方法返回到模板，在組件初始化的時(shí)候執(zhí)行，其效果類(lèi)似于Vue 2中的beforeCreate 和 created。如果想使用setup里的數(shù)據(jù)，需要將值return出來(lái)，沒(méi)有從setup函數(shù)返回的內(nèi)容在模板中不可用。

Ref函數(shù)的作用是創(chuàng)建一個(gè)引用值，主要是對(duì)String、Number、Boolean的數(shù)據(jù)響應(yīng)做引用。

相對(duì)于Vue 2，Vue 3的生命周期函數(shù)也發(fā)生了變更，如下所示：

· beforeCreate -> 請(qǐng)使用 setup()

· created -> 請(qǐng)使用 setup()

· beforeMount -> onBeforeMount

· mounted -> onMounted

· beforeUpdate -> onBeforeUpdate

· updated -> onUpdated

· beforeDestroy -> onBeforeUnmount

· destroyed -> onUnmounted

· errorCaptured -> onErrorCaptured

需要注意的是，Vue 2使用生命周期函數(shù)時(shí)是直接在頁(yè)面中寫(xiě)入生命周期函數(shù)，而在Vue 3則直接引用即可：

import {reactive, ref, onMounted} from ‘vue’

3. Tree shaking support（按需打包模塊）

有人將“Tree shaking” ?稱(chēng)之為“搖樹(shù)優(yōu)化”，其實(shí)就是把無(wú)用的模塊進(jìn)行“剪枝”，剪去沒(méi)有用到的API，因此“Tree shaking”之后，打包的體積將大幅度減少。

官方將Vue 2和Vue 3進(jìn)行了對(duì)比，Vue 2若只寫(xiě)了Hello World，且沒(méi)有用到任何的模塊API，打包后的大小約為32kb，而Vue 3 打包后僅有13.5kb。

4. 全新的腳手架工具：Vite

Vite 是一個(gè)由原生 ESM 驅(qū)動(dòng)的 Web 開(kāi)發(fā)構(gòu)建工具。在開(kāi)發(fā)環(huán)境下基于瀏覽器原生 ES imports 開(kāi)發(fā)，在生產(chǎn)環(huán)境下基于 Rollup 打包。

和 Webpack相比，具有以下特點(diǎn)：

· 快速的冷啟動(dòng)，不需要等待打包

· 即時(shí)的熱模塊更新

· 真正的按需編譯，不用等待整個(gè)項(xiàng)目編譯完成

由于完全跳過(guò)了打包這個(gè)概念，Vite的出現(xiàn)大大的撼動(dòng)了Webpack的地位，且真正做到了服務(wù)器隨起隨用。看來(lái)，連尤大神都難逃“真香”理論。

Vite究竟有什么魔力？不妨讓我們通過(guò)實(shí)際搭建一款基于Vue 3 組件的表格編輯系統(tǒng)，親自體驗(yàn)一把。

一、環(huán)境搭建

使用 Vite 初始化一個(gè) Vue 3 項(xiàng)目

1. 執(zhí)行代碼：

$ npm init vite-app <project-name>$ cd <project-name> //進(jìn)入項(xiàng)目目錄$ npm install //安裝項(xiàng)目所需依賴(lài)$ npm run dev //啟動(dòng)項(xiàng)目

我們來(lái)看下生成的代碼, 因?yàn)?vite 會(huì)盡可能多地鏡像 vue-cli 中的默認(rèn)配置, 所以，這段代碼看上去和 vue-cli 生成的代碼沒(méi)有太大區(qū)別。

├── index.html├── package.json├── public│ └── favicon.ico└── src├── App.vue├── assets│ └── logo.png├── components│ └── HelloWorld.vue├── index.css└── main.js

2. 執(zhí)行下列命令：

此時(shí)如果不通過(guò) npm run dev 來(lái)啟動(dòng)項(xiàng)目，而是直接通過(guò)瀏覽器打開(kāi) index.html, 會(huì)看到下面的報(bào)錯(cuò)：

報(bào)錯(cuò)的原因：瀏覽器的 ES module 是通過(guò) http 請(qǐng)求拿到模塊的，所以 vite 的一個(gè)任務(wù)就是啟動(dòng)一個(gè) web server 去代理這些模塊，在 vite 里是借用了 koa 來(lái)啟動(dòng)的服務(wù)。

export function createServer(config: ServerConfig): Server {// ...const app = new Koa<State, Context>()const server = resolveServer(config, app.callback())// ...const listen = server.listen.bind(server)server.listen = (async (...args: any[]) => {if (optimizeDeps.auto !== false) {await require('../optimizer').optimizeDeps(config)}return listen(...args)}) as anyreturn server }

由于瀏覽器中的 ESM 是獲取不到導(dǎo)入的模塊內(nèi)容的，需要借助Webpack 等工具，如果我們沒(méi)有引用相對(duì)路徑的模塊，而是引用 node_modules，并直接 import xxx from ‘xxx’，瀏覽器便無(wú)法得知你項(xiàng)目里有 node_modules，只能通過(guò)相對(duì)路徑或者絕對(duì)路徑去尋找模塊。

這便是vite 的實(shí)現(xiàn)核心：攔截瀏覽器對(duì)模塊的請(qǐng)求并返回處理后的結(jié)果（關(guān)于vite 的實(shí)現(xiàn)機(jī)制，文末會(huì)深入講解）。

3. 生成項(xiàng)目結(jié)構(gòu)：

入口 index.html 和 main.js 代碼結(jié)構(gòu)為：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title> </head> <body><div id="app"></div><script type="module" src="/src/main.js"></script> </body> </html>// main.js // 只是引用的是最新的 vue3 語(yǔ)法，其余相同 import { createApp } from 'vue' import App from './App.vue' import './index.css'createApp(App).mount('#app')

4. 進(jìn)入項(xiàng)目目錄：cd myVue3

5. 安裝相關(guān)模塊：npm install

6. 下載模塊：

7. 啟動(dòng)項(xiàng)目：npm run dev

8. 進(jìn)入地址，當(dāng)我們看到這個(gè)頁(yè)面時(shí)，說(shuō)明項(xiàng)目已經(jīng)成功啟動(dòng)了。

Vite 的實(shí)現(xiàn)機(jī)制

1. /@module/ 前綴

對(duì)比工程下的 main.js 和開(kāi)發(fā)環(huán)境下實(shí)際加載的 main.js，可以發(fā)現(xiàn)代碼發(fā)生了變化。

工程下的 main.js：

import { createApp } from 'vue' import App from './App.vue' import './index.css'createApp(App).mount('#app')

實(shí)際加載的 main.js：

import { createApp } from '/@modules/vue.js' import App from '/src/App.vue' import '/src/index.css?import'createApp(App).mount('#app')

為了解決?import xxx from ‘xxx’?報(bào)錯(cuò)的問(wèn)題，vite 對(duì)這種資源路徑做了統(tǒng)一處理，即添加一個(gè)/@module/前綴。

在?src/node/server/serverPluginModuleRewrite.ts?源碼的 koa 中間件里可以看到 vite 對(duì) import 做了一層處理，其過(guò)程如下：

· 在 koa 中間件里獲取請(qǐng)求 body

· 通過(guò)?es-module-lexer?解析資源 ast 拿到 import 的內(nèi)容

· 判斷 import 的資源是否是絕對(duì)路徑，絕對(duì)視為 npm 模塊

· 返回處理后的資源路徑：“vue” => “/@modules/vue”

2. 支持?/@module/

在?/src/node/server/serverPluginModuleResolve.ts?里可以看到大概的處理邏輯：

· 在 koa 中間件里獲取請(qǐng)求 body

· 判斷路徑是否以 /@module/ 開(kāi)頭，如果是取出包名

· 去node_module里找到這個(gè)庫(kù)，基于 package.json 返回對(duì)應(yīng)的內(nèi)容

3. 文件編譯

通過(guò)前文，我們知道了 js module 的處理過(guò)程，對(duì)于vue、css、ts等文件，其又是如何處理的呢？

以 vue 文件為例，在 webpack 里使用 vue-loader 對(duì)單文件組件進(jìn)行編譯，在這里 vite 同樣攔截了對(duì)模塊的請(qǐng)求并執(zhí)行了一個(gè)實(shí)時(shí)編譯。

通過(guò)工程下的 App.vue 和實(shí)際加載的 App.vue，便發(fā)現(xiàn)改變。

工程下的 App.vue：

<template><img alt="Vue logo" src="./assets/logo.png" /><HelloWorld msg="Hello Vue 3.0 + Vite" /> </template><script> import HelloWorld from './components/HelloWorld.vue';export default {name: 'App',components: {HelloWorld,}, }; </script> <style> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>

實(shí)際加載的 App.vue：

import HelloWorld from '/src/components/HelloWorld.vue';const __script = {name: 'App',components: {HelloWorld,}, };import "/src/App.vue?type=style&index=0&t=1592811240845" import {render as __render} from "/src/App.vue?type=template&t=1592811240845" __script.render = __render __script.__hmrId = "/src/App.vue" __script.__file = "/Users/wang/qdcares/test/vite-demo/src/App.vue" export default __script

可見(jiàn)，一個(gè) .vue?文件被拆成了三個(gè)請(qǐng)求（分別對(duì)應(yīng) script、style 和template） ，瀏覽器會(huì)先收到包含 script 邏輯的 App.vue 的響應(yīng)，然后解析到 template 和 style 的路徑后，再次發(fā)起 HTTP 請(qǐng)求來(lái)請(qǐng)求對(duì)應(yīng)的資源，此時(shí) Vite 對(duì)其攔截并再次處理后返回相應(yīng)的內(nèi)容。

// App.vue?type=style import { updateStyle } from "/vite/hmr" const css = "\n#app {\n font-family: Avenir, Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-align: center;\n color: #2c3e50;\n margin-top: 60px;\n}\n" updateStyle("7ac74a55-0", css) export default css// App.vue?type=template import {createVNode as _createVNode, resolveComponent as _resolveComponent, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock} from "/@modules/vue.js"const _hoisted_1 = /*#__PURE__*/ _createVNode("img", {alt: "Vue logo",src: "/src/assets/logo.png" }, null, -1 /* HOISTED */ )export function render(_ctx, _cache) {const _component_HelloWorld = _resolveComponent("HelloWorld")return (_openBlock(),_createBlock(_Fragment, null, [_hoisted_1, _createVNode(_component_HelloWorld, {msg: "Hello Vue 3.0 + Vite"})], 64 /* STABLE_FRAGMENT */)) }

vite對(duì)于其他的類(lèi)型文件的處理幾乎都是類(lèi)似的邏輯，即根據(jù)請(qǐng)求的不同文件類(lèi)型，做出不同的編譯處理結(jié)果。

擴(kuò)展閱讀

· Vue 3 組件開(kāi)發(fā)實(shí)戰(zhàn)：搭建基于SpreadJS的表格編輯系統(tǒng)（組件集成篇）

· Vue 3 組件開(kāi)發(fā)實(shí)戰(zhàn)：搭建基于SpreadJS的表格編輯系統(tǒng)（功能拓展篇）

· SpreadJS Vue 框架支持

總結(jié)

以上是生活随笔為你收集整理的Vue 3 组件开发：搭建基于SpreadJS的表格编辑系统（环境搭建）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。