1. 提升用戶的開發體驗
開發體驗是衡量一個框架的指標之一
關于快速定位問題和列印警告資訊和其他重要資訊 Vue.js3 原始碼中使用 initCustomFormatter 函式
該函式作用： 在開發環境下自定義formatter的
Chrome為例， 打開 DevTools 勾選 Console --> Enable custom formatters
2. 控制框架代碼體積
框架的大小也是衡量框架的標準之一
1. 關于警告
Vue.js3 中 每一個warn都配合 __DEV__ 常量的檢查
Vue.js采用 rollup.js 對專案進行構建 ， __DEV__ 常量實際上就是通過rollup,js的插件配置來預定義的，其功能類似于 webpack中的 DefinePlugin插件
Vue.js 在輸出資源時，會輸出兩個版本
vue.global.js ==> __DEV__ = true 開發環境 提示 warn
vue.gloabl.prod.js ==> __DEV__ = false 生成環境 不提示
if (__DEV__ && !res) {
warn(
` Failed to mount app: mount target selector "${}container" return false `
)
}
3. Tree-Shaking
如何做到不需要的代碼不構建？
Tree-Shaking ：消除那些永遠不會執行的代碼 （ rollup.js webpack 都支持 ）
實作 Tree-Shaking 必備條件：
模塊必須是ESM ( ES MODULE ) 因為Tree-Shaking 依賴 ESM 靜態結構
Tree-Shaking 副作用
如果一個函式呼叫會產生副作用就無法移除
副作用： 當呼叫函式時，會對外部產生影響，比如修改全域變數
由于靜態分析JS代碼和困難，所以 rollup.js 提供了一個機制 /* #__PURE__ */ 注釋
/* #__PURE__ */ 作用： 該注釋之后的代碼不產生副作用 /* #__PURE__ */ foo()
/* #__PURE__ */ 不僅可以用于函式 也可以用于任何陳述句
4. 框架應該輸出怎樣的構建產物
除了提到的開發環境和生產環境外， Vue還會根據場景的不通生成其他形式的產物
IIFE 自呼叫函式
實作在script標簽中引入框架并使用 就必須輸出IIFE的格式
實際上 vue.global.js 就是 IIFE 的形式
在 rollup.js中可配置 format： ‘iife’ 輸出
ESM
Vue.js 還會輸出 vue.esm-browser.js 是給用 < script type ="module > 使用的
輸出這種資源對應配置項 format: 'esm'
Vue.js 輸出 vue.esm-bundler.js 是為 roolup.js webpack 打包工具使用的
當構建 script標簽的時候 __ DEV__ 會設定為 true/false
當構建打包工具（-bundler） __ DEV__ 會設定為 process.env.NODE_ENV !== 'production'
好處： 用戶可以通過webpack配置自行決定構建資源的目標
CJS
在Node環境下使用 服務端渲染
配置 format:'cjs'
5.特性開關
多個特性對應多個特性開關
好處： 特性開干一旦關閉 Tree-Shanking 機制讓其不包含在最終原始碼
實作：
vue3.js __FEATURE_OPTIONS_API__ : isBundlerESMBuild ? `__VUE_OPTIONS_API__` :true
即帶 ‘ -bundler ’ 的 會使用 __VUE_OPTIONS_API__
__VUE_OPTIONS_API__ 可用來關閉 vue2.x 選項api使用 vue.js 3 推薦使用 組合api
6. 錯誤處理
Vue.js 3 提供統一的錯誤處理
callWithErrorHandling 捕獲錯誤處理程式
registerErrorHandler 注冊錯誤處理程式
代碼演示
7. 對 TS型別支持非常友好
TS是微軟開發的開源的編程語言，是 JS的超集，能為JS提供型別支持
Vue.js3對TS的型別支持做的很友好
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503137.html
標籤：其他