云原生应用架构设计与开发实战

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

## 云原生应用架构设计与开发实战
面試總問Vue3原理和完成，讀Vue3源码前，先理解這些 事半功倍
前言
    在前端界，大多數人都說Vue.js上手門槛很低，並且在工作中大多數場景只需求简單的純熟的運用API和依賴其開源的生態就能完成前端需求的開發。但面試早已不只是調查妳應用層面的控製狀況，面試官還喜歡調查技術背後的完成原理來判別妳對技術的控製水平，以及能否有對技術的研究肉體。但是學習源码很單調，而且笼統，了解起來也更難，很多人就放棄了，本文將分離《Vue.js設計與完成》，以全局視角去看框架設計的思緒，希望對讀Vue3源码前的妳有所協助。
本文目錄
（一）框架根本學問
從兩種框架的範式的引見到虛擬DOM的性能狀況，到運轉時和編译時的相關學問，並引見Vue.js3是個運轉時和編译時的框架
（二）框架設計的中心要素
從框架設計者在設計框架思索的用戶開發體驗，控製框架代码體積，Tree-Shaking的工作機製、框架產物、特性開關、錯誤處置
（三）Vue3的設計思緒
從全局視角理解Vue.js3的設計思緒，以及各個模塊之間如何協作的
（四）Vue3的優化匯合
分別從源码優化、性能優化、语法API優化三個維度經過思想導圖的方式展示 Vue.js 3.0 的優化
備注：本文援用的Vue3源码版本是 "version": "3.2.31"
一、框架根本學問
1.1 框架的範式
命令式
關注過程。比方JQuery,自然言语描绘可以與代码逐個對應關係
$('#app').text('hello world').on('click',()=>{console.log('妳好 世界')})
復製代码
聲明式
關注結果。像Vue幫我們封裝了過程，内部完成是命令式，暴露給用戶的愈加聲明式
<div @click="()=>{console.log('妳好 世界')}">hello world
復製代码
1.2 性能與可維護性的權衡

命令式代码的更新性能耗费 = 直接修正的性能耗费
聲明式代码的更新性能耗费 = 直接修正的性能耗费 + 找出差別的性能耗费

能夠看出理論上來說，聲明式代码性能不優於命令式代码性能，但是爲什麼Vue.js還是選择聲明式框架呢？缘由是聲明式代码的可維護性更強，在開發的時分，我們不需求關注過程，展現的直接是我們的想要的結果，看上去更直觀。當然聲明式代码提升可維護的同時，性能會有一定的损失，所以大多數框架的版本的迭代更新，都會在性能损失上做最小化的優化。
1.3 虛擬DOM的性能到底如何
虛擬DOM是爲了最小化差別化性能耗费而呈現的，讓聲明式代码的性能無限接近命令式代码的性能。虛擬DOM的更新技術理論上不能比原生js操作DOM更高。

從上圖上，我們大約能夠看到：
（1）原生JS操作DOM性能是最高的，但是心智擔負最高，代码可維護性也很低，妳需求手動去創立，删除修正大量的DOM元素。
（2）innerHML，是經過拚接字符串和原生JS绑定事情之類事情，假如模板很大，更新的性能最差，特別是少量的更新的時分。
（3）虛擬DOM心智擔負小，可維護性強
運轉和編译
作爲前端，我們運用的框架時分常常有三個類型，一個是純運轉時，運轉時+編译時，編译時。
運轉時，框架做的工作是對一個樹形構造的數據對象停止遞歸，將數據渲染成DOM元素，像在Vue.js提供一個渲染函數render。樹形構造的數據對象，實質上就是用來描绘DOM的JS對象，在Vue.js中能夠描绘不同類型的節點，比方普通元素節點、組件節點等。就像如下：
const vnode = {
  type: 'button',
  props: {
    'class': 'btn',
    style: {
      width: '100px',
      height: '50px'
    }
  },
  children: 'click me'
}
復製代码
其中，type 屬性表示 DOM 的標簽類型，props 屬性表示 DOM 的一些附加信息，比方 style 、class 等，children 屬性表示 DOM 的子節點，它也能夠是一個數組（代表子節點），也能夠是用字符串表示简單的文本。
當然我們會發現手寫樹形構造的數據對象太费事了，而且不直觀，能不能支持相似HTML標簽的方式描绘樹形構造對象呢？ 就像下面：

  hello world


復製代码
轉換爲
const vnode = {
  type: 'div',
  children:[
    {type:'span', children:'hello world'}
  ]
}
復製代码
爲此，我們就要編寫了一個Compiler函數，來編译得到樹形構造的數據對象，然後再去調用render函數停止渲染。
此時可能妳會考慮，既然編译器能夠把HTML字符串編译成數據對象，爲什麼不能直接編译成命令式代码呢？
就像Vue.js是一個編译時+運轉時的框架，它是爲了堅持靈敏性的根底上，又能經過編译手腕剖析用戶提供的内容，從而進一步提升更新性能。
二、框架設計的中心要素

2.1 提升用戶的開發體驗
比方友好的正告信息，讓用戶更好的快速定位問題，俭省用戶時間

2.2 控製框架代码的體積
在完成同樣功用的狀況下，代码越少越好，這樣體積就會越小，最後阅讀器加载資源的時間就也少。Vue.js的打印正告信息只在開發環境，消费環境不會提供正告信息。Vue.js每個打印正告信息都是有一個_DEV_常量
2.3 框架要做好良好的Tree-Shaking
Tree-Shaking指的是消弭那些永遠不會被執行的代码，在前端範畴這個概念因rollup.js而提高，webpack都支持。但是模塊必需是ESM(ES module)，由於Tree-Shaking依賴ESM的静態構造
Tree-Shaking 假如一個函數的調用會參數反作用，就不能將其移出，rollup.js和webpack以及一些緊缩工具都會辨認 /*#__PURE__*/, vue3源码中有大量運用
download链接：https://pan.baidu.com/s/15JXgrtHtp0uEeyrIUVnvqg?pwd=c26l
提取码：c26l
--来自百度网盘超级会员V4的分享

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：Hello World Children download Version COMPILE