Vue隐藏技能：运行时渲染用户写入的组件代码！
作者：還沒想好
https://zhuanlan.zhihu.com/p/347509262
一語驚人
前段時間接了一個需求：能不能讓用戶自制組件，從而達到定制渲染某個區域的目的。說實話接到這個需求心中一驚，感嘆這個想法真是大膽呀，但作為打工人，秉承著只要思想不滑坡，辦法總比困難多的打工魂，即使是刀山也得上呀，歷經幾日的摸索調研，發現其實 VUE 一早就支持了這么做，只不過時過境遷，漸漸被遺忘了這個隱藏的技能。
大致說一下項目的背景：我們做了一個拖拽生成報表的系統，通過拖拽內置的組件供用戶定制自己的報表形態，但畢竟內置的組件有限，可定制性不高，那么給用戶開放一個 code 組件，讓用戶自己通過寫template?+?js?+?css的方式自由定制豈不是妙哉。
重提漸進式
那么該怎么實現呢？我們先來看一 vue 官方的介紹
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。[1]
很多時候我們貌似已經忽略了漸進式這回事，現在基于 VUE 開發的項目大多都采用 vue cli 生成，以 vue 單文件的方式編碼，webpack 編譯打包的形式發布。這與漸進式有什么關系呢，確實沒有關系。
漸進式其實指的在一個已存在的但并未使用 vue 的項目上接入 vue，使用 vue，直到所有的 HTML 漸漸替換為通過 vue 渲染完成，漸進開發，漸進遷移，這種方式在 vue 剛出現那幾年比較多，現在或許在一些古老的項目也會出現。
為什么要提漸進式呢？因為漸進式是不需要本地編譯的，有沒有 get 到點！對，就是不需要本地編譯，而是運行時編譯。
本地編譯與運行時編譯
用戶想通過編寫template?+?js?+?css的方式實現運行時渲染頁面，那肯定是不能本地編譯的（此處的編譯指將 vue 文件編譯為 js 資源文件），即不能把用戶寫的代碼像編譯源碼一樣打包成靜態資源文件。
這些代碼只能原樣持久化到數據庫，每次打開頁面再恢復回來，實時編譯。畢竟不是純 js 文件，是不能直接運行的，它需要一個運行時環境，運行時編譯，這個環境就是?vue 的運行時 + 編譯器[2]。
有了思路也只是窺到了天機，神功練成還是要打磨細節。具體怎么做，容我一步步道來。
技術干貨
第一步：需要一個運行時編譯環境
按官方的介紹[3]，通過 script 標簽引入 vue 就可以漸進式開發了，也就具備了運行時+編譯器，如下
<!DOCTYPE?html> <html?lang="en"><head><title>Document</title><script?src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div?id="app">{{message}}</div><script?type="text/javascript">var?app?=?new?Vue({el:?"#app",data:?{message:?"Hello?Vue!",},});</script></body> </html>但通過 vue 單文件+webpack 編譯的方式，再引入一個 vue 就多余了，通過 CLI 也是可以的，只需要在 vue.config.js 中打開 runtimeCompiler 開關就行了，詳細看文檔[4]。
此時我們就有了一個運行時編譯環境
第二步：把用戶的代碼注冊到系統中
把代碼渲染出來有兩個方案
通過?注冊組件[5]?的方式，把代碼注冊為 vue 實例的組件，注冊組件又分 全局注冊 和 局部注冊 兩種方式
通過掛載點直接掛載 vue 實例， 即通過new Vue({ el: '#id' })的方式
第一種方案：動態組件
對于這種方式，在官方文檔中，組件注冊章節，最后給出了一個注意點
記住全局注冊的行為必須在根 Vue 實例 (通過 new Vue)?創建之前發生。
因此，并不能通過調用Vue.component('my-component-name', {/* */})的方式將用戶的代碼注冊到系統中，因為運行時 Vue 實例已經創建完，用戶的代碼是在實例完 Vue 后才進來的，那我們只能通過局部注冊的方式了，類似這樣
var?ComponentB?=?{components:?{"component-a":?{...customJsLogic,name:?"custom-component",template:?"<div>custom?template</div>",},},//?... };但想一下，好像不太對，這還是在寫源碼，運行時定義了ComponentB組件怎么用呢，怎么把ComponentB在一個已經編譯完頁面上渲染出來呢？找不到入口點，把用戶代碼注入到components對象上也無法注冊到系統中，無法渲染出來。
就止步于此了嗎？該怎么辦呢？
想一下為什么要在components中先注冊(聲明)下組件，然后才能使用？component 本質上只不過是一個 js object 而已。其實主要是為了服務于 template 模板語法，當你在 template 中寫了?<compA propA='value'/>，有了這個注冊聲明才能在編譯時找到compA。如果不使用 template，那么這個注冊就可以省了。
不使用 template 怎么渲染呢，使用render 函數[6]呀！
在 render 函數中如果使用 createElement 就比較麻煩了，API 很復雜，對于渲染一整段用戶定義的 template 也略顯吃力，使用 jsx 就方便多了，都 1202 年了，想必大家對 jsx 都應該有所了解。
回到項目上，需要使用用戶代碼的地方不止一處，都用 render 函數寫一遍略顯臃腫，那么做一個 code 的容器，容器負責渲染用戶的代碼，使用地方把容器掛上就行了。
容器核心代碼
容器使用
以上只是核心的邏輯部分，除了這些，在項目實戰中還應考慮容錯處理，錯誤大致可以分兩種
用戶代碼語法錯誤
主要是 js 部分，對于 css 和 template 的錯誤，瀏覽器有一定的糾錯的機制，不至于崩了。
這部分的處理主要借助于safeStringToObject這個函數，如果有語法錯誤，則返回 Error，處理一下回顯給用戶，代碼大致如下
//?component對象在result.value上取，如果result.error有值，則代表出現了錯誤 component()?{//?把代碼字符串轉成js對象const?result?=?safeStringToObject(this.js)const?component?=?result.valueif?(result.error)?{console.error('js?腳本錯誤',?result.error)result.error?=?{msg:?result.error.toString(),type:?'js腳本錯誤',}result.value?=?{?hasError:?true?}return?result}//?...retrun?result }組件運行時錯誤
既然把 js 邏輯交給了用戶控制，那么像類型錯誤，從 undefined 中讀值，把非函數變量當函數運行，甚至拼寫錯誤等這些運行時錯誤就很有可能發生。
這部分的處理需要通過在容器組件上添加?`errorCaptured`這個官方鉤子[7]，來捕獲子組件的錯誤，因為并沒有一個途徑可以獲取組件自身運行時錯誤的鉤子。代碼大致如下
errorCaptured(err,?vm,?info)?{this.subCompErr?=?{msg:?err?&&?err.toString?&&?err.toString()?||?err,type:?'自定義組件運行時錯誤：',}console.error('自定義組件運行時錯誤：',?err,?vm,?info) },結合錯誤處理，如果希望用戶能看到錯誤信息，則 render 函數需要把錯誤展示出來，代碼大致如下
render()?{const?{?error:?compileErr,?value:?component?}?=?this.componentconst?error?=?compileErr?||?this.subCompErrlet?errorDomif?(error)?{errorDom?=?<div?class='error-msg-wrapper'><div>{error.type}</div><div>{error.msg}</div></div>}return?<div?class='code-preview-wrapper'><div?class={this.className}><style>{this.scopedStyle}</style><component?/></div>{errorDom}</div> },這里還有一個點，用戶發現組件發生了錯誤后會修改代碼，使其再次渲染，錯誤的回顯需要特別處理下。
對于 js 腳本錯誤，因 component 是計算屬性，隨著 computed 計算屬性再次計算，如果 js 腳本沒有錯誤，導出的 component 可重繪出來，
但對于運行時錯誤，使用this.subCompErr內部變量保存，props 修改了，這個值卻不會被修改，因此需要打通 props 關聯，通過添加 watch 的方式解決，這里為什么沒有放在 component 的計算屬性中做，一是違背計算屬性設計原則，二是 component 可能并不僅僅依賴 js,css,template 這個 props 的變化，而this.subCompErr只需要和這個三個 props 關聯，這么做會有多余的重置邏輯。
還有一種場景就是子組件自身可能有定時刷新邏輯，定期或不定期的重繪，一旦發生了錯誤，也會導致一直顯示錯誤信息，因為用戶的代碼拿不到this.subCompErr的值，因此也無法重置此值，這種情況，可通過注入beforeUpdate鉤子解決，代碼大致如下
computed:?{component()?{//?把代碼字符串轉成js對象const?result?=?safeStringToObject(this.js)const?component?=?result.value//?...//?注入mixinscomponent.mixins?=?[{//?注入?beforeUpdate?鉤子，用于子組件重繪時，清理父組件捕獲的異常beforeUpdate:?()?=>?{this.subCompErr?=?null},}]//?...return?result}, }, watch:?{js()?{//?當代碼變化時，清空error，重繪this.subCompErr?=?null},template()?{//?當代碼變化時，清空error，重繪this.subCompErr?=?null},css()?{//?當代碼變化時，清空error，重繪this.subCompErr?=?null},},完整的代碼見：https://github.com/merfais/vue-demo/blob/main/src/views/customCode/withComponent.vue[8]
完整的 demo 見：https://merfais.github.io/vue-demo/#/custom-code[9]
第二種方案：動態實例
我們知道在利用 vue 構建的系統中，頁面由組件構成，頁面本身其實也是組件，只是在部分參數和掛載方式上有些區別而已。這第二種方式就是將用戶的代碼視為一個 page，通過 new 一個 vm 實例，再在 DOM 掛載點掛載 vm(new Vue(component).$mount('#id'))的方式渲染。
動態實例方案與動態組件方案大致相同，都要通過 computed 屬性，生成component對象和scopedStyle對象進行渲染，但也有些許的區別，動態實例比動態組件需要多考慮以下幾點：
需要一個穩定的掛載點
從 vue2.0 開始，vue 實例的掛載策略變更為，所有的掛載元素會被 Vue 生成的 DOM 替換[10]，在此策略下，一旦執行掛載，原來的 DOM 就會消失，不能再次掛載。但我們需要實現代碼變更后能夠重新渲染，這就要求掛載點要穩定存在，解決方案是對用戶的 template 進行注入，每次渲染前，在 template 外層包一層帶固定 id 的 DOM
運行時錯誤捕獲errorCaptured需要注入到component對象上，不再需要注入beforeUpdate鉤子
因為通過new Vue()的方式創建了一個新的 vm 實例，不再是容器組件的子組件，所以容器組件上的errorCaptured無法捕獲新 vm 的運行時錯誤，new Vue(component)中參數 component 是頂層組件，根據?Vue 錯誤傳播規則[11]?可知，在非特殊控制的情況下，頂層的?errorCaptured?會捕獲到錯誤
首次掛載需要制造一定的延遲才能渲染
由于掛載點含在 DOM 在容器內，與計算屬性導出的component對象在首次掛載時時序基本是一致的，導致掛載 vm($mount('#id'))時，DOM 可能還沒有渲染到文檔流上，因此在首次渲染時需要一定的延遲后再掛載 vm。
以上的不同點，并未給渲染用戶自定義代碼帶來任何優勢，反而增加了限制，尤其?需要穩定掛載點?這一條，需要對用戶提供的 template 做二次注入，包裹掛載點，才能實現用戶修改組件后的實時渲染更新，因此，也不能支持用戶定義 render 函數，因為無法獲取未經運行的 render 函數的返回值，也就無法注入外層的掛載點。
另外一點也需要注意，這種方式也是無法在容器組件中使用 template 定義渲染模板的，因為如果在 template 中寫 style 標簽會出現以下編譯錯誤，但 style 標簽是必須的，需要為自定義組件提供 scoped 的樣式。（當然，也可以通過提供 appendStyle 函數實現動態添加 style 標簽，但這樣并沒有更方便，因此沒有必要）
??Errors?compiling?template:Templates?should?only?be?responsible?for?mapping?the?state?to?the?UI.?Avoid?placing?tags?with?side-effects?in?your?templates,?such?as?<style>,?as?they?will?not?be?parsed.2??|??<span :class="className">3??|????<span id="uid"?/>4??|????<style>{this.scopedStyle}</style>|????^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^5??|??</span>|??^^^^^^^鑒于以上缺點，就不提供核心代碼示范了，直接給源碼和 demo
完整的代碼見：https://github.com/merfais/vue-demo/blob/main/src/views/customCode/withMount.vue[12]
完整的 demo 見：https://merfais.github.io/vue-demo/#/custom-code[13]
想一下，如果動態實例方案僅僅有以上缺點，那考慮這種方案有什么意義呢？其實，它的意義在于，動態實例方案主要應用于 iframe 渲染，而使用 iframe 渲染的目的則是為了隔離。
iframe 會創建獨立于主站的一個域，這種隔離可以很好地防止 js 污染和 css 污染，隔離方式又分為跨域隔離和非跨域隔離兩種，跨域則意味著完全隔離，非跨域則是半隔離，其主要區別在于安全策略的限制，這個我們最后再說。
iframe 是否跨域由 iframe 的 src 的值決定，設置同域的 src 或不設置 src 均符合同域策略，否則是跨域。對于沒有設置 src 的 iframe，頁面只能加載一個空的 iframe，因此還需要在 iframe 加載完后再動態加載依賴的資源，如：vuejs，其他運行時的依賴庫（示例 demo 加載了 ant-design-vue）等。如果設置了 src，則可以將依賴通過 script 標簽和 link 標簽提前寫到靜態頁面文件中，使依賴資源在加載 iframe 時自動完成加載。
先介紹半隔離方式，即通過非跨域 iframe 渲染，首先需要渲染一個 iframe，我們使用不設置 src 的方式，這樣更具備通用性，可以用于任意的站點。核心代碼如下
<template><iframe?ref="iframe"?frameborder="0"?scrolling="no"?width="100%"?/> </template>由于是位于同域，主站與 iframe 可以互相讀取 window 和 document 引用，因為，可以動態加載資源，核心代碼如下
methods:?{mountResource()?{//?添加依賴的cssappendLink('https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.css',?this.iframeDoc)//?添加依賴的js，保留handler用于首次渲染的異步控制this.mountResourceHandler?=?appendScriptLink([{src:?'https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js',defer:?true,},?{src:?'https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.js',defer:?true,}],?this.iframeDoc)}, }, mounted()?{this.iframeDoc?=?this.$refs.iframe.contentDocumentthis.mountResource() },接下來是組件對象組裝和掛載，基本上和動態組件的大同小異，只是掛載不再通過 render 函數。先上核心代碼，再說注意點。
??computed:?{component()?{//?把代碼字符串轉成js對象const?component?=?safeStringToObject(this.js)//?關聯css，為的是修改css后可自動重繪component.css?=?this.css//?去掉template的前后標簽const?template?=?(this.template?||?'').replace(/^?*<?*template?*>|<\/?*template?*>?*$/g,?'').trim()//?注入template或render，設定template優先級高于renderif?(template)?{component.template?=?templatecomponent.render?=?undefined}?else?if?(!component.render)?{component.template?=?'<span>未提供模板或render函數</span>'}return?component},},watch:?{component()?{if?(this.hasInit)?{this.mountCode()}?else?if?(this.mountResourceHandler)?{this.mountResourceHandler.then(()?=>?{this.hasInit?=?truethis.mountCode()})}},},methods:?{mountCode()?{//?添加cssconst?css?=?this.component.cssdelete?this.component.cssremoveElement(this.styleId,?this.iframeDoc)this.styleId?=?appendStyle(css,?this.iframeDoc)//?重建掛載點if?(this.iframeDoc.body.firstElementChild)?{this.iframeDoc.body.removeChild(this.iframeDoc.body.firstElementChild)}prependDom({?tag:?'div',?id:?'app'?},?this.iframeDoc)//?掛載實例const?Vue?=?this.iframeWin.Vuenew?Vue(this.component).$mount('#app')},},注意點：
iframe 的渲染到文檔流后才能添加依賴資源，依賴資源加載完才能執行 vm 的掛載，首次加載時需要控制時序
vm 掛載點的重建采用了永遠添加在 body 的第一個子元素的方式，這么做的原因是一些第三方的庫（如 ant-design-vue）也會向 body 中動態添加 element，雖然采用docment.body.innerHTML=''的方式可以快速且干凈的清空 body 內容，但也會將第三方庫添加的內容給干掉，導致第三方庫全部或部分不可用。
為了使 css 變化后也引發重繪，在計算屬性component中也綁定了 css 的值，但這對于新建 vm 實例這個字段是無用的，也可以通過 watch css 的方式實現
接下來考慮錯誤處理，對于 iframe 掛載的錯誤處理稍有不同，為了盡量不干預用戶的代碼，此模式下的錯誤渲染采用重建 DOM，重新渲染 vm 的策略，即發生錯誤后，無論是靜態的語法錯誤還是運行時錯誤，都重繪。當然這種做法也就丟失了組件自刷新的功能，因為一旦發生錯誤，原來的組件會被卸載，渲染為錯誤信息。核心代碼如下
?computed:?{component()?{if?(this.subCompErr)?{return?this.renderError(this.subCompErr)}//?把代碼字符串轉成js對象const?result?=?safeStringToObject(this.js)if?(result.error)?{return?this.renderError({type:?'js腳本錯誤',msg:?result.error.toString(),})}const?component?=?result.value//?注入errorCaptured,?用于錯誤自定義組件運行時捕獲component.errorCaptured?=?(err,?vm,?info)?=>?{this.subCompErr?=?{msg:?err?&&?err.toString?&&?err.toString(),type:?'自定義組件運行時錯誤：',}console.error('自定義組件運行時錯誤：',?err,?vm,?info)}return?component},},watch:?{js()?{//?當代碼變化時，清空error，重繪this.subCompErr?=?null},template()?{//?當代碼變化時，清空error，重繪this.subCompErr?=?null},css()?{//?當代碼變化時，清空error，重繪this.subCompErr?=?null},},methods:?{renderError({?type,?msg?})?{return?{render()?{return?<div?style='color:?red'><div>{type}</div><div>{msg}</div></div>},}},},除了錯誤處理，還需解決一下 iframe 的一些特性，比如邊框，滾動條，默認寬高，其中比較棘手是 iframe 高度有默認值，并不會隨著 iframe 的內容自適應高度，但對于自定義組件的渲染，需要動態計算高度，固定高度是不行的。
邊框，滾動條，寬度可通過修改 iframe 的屬性解決，見上面的 template 代碼。
高度自適應的解決方案是通過MutationObserver觀測 iframe 的 body 變化，在回調中計算掛載點（第一個子元素）的高度，然后再修改 iframe 本身的高度。之所以沒有直接使用 body 的高度，是因為 body 有默認的高度，當被渲染的組件高度小于 body 高度時，直接使用 body 的高度是錯的。核心代碼如下
mounted()?{//?通過觀察器觀察iframe的body變化后修改iframe的高度，//?使用iframe后垂直的margin重合效果會丟失const?observer?=?new?MutationObserver(()?=>?{const?firstEle?=?this.iframeDoc.body.firstElementChildconst?rect?=?firstEle.getBoundingClientRect()const?marginTop?=?parseFloat(window.getComputedStyle(firstEle).marginTop,?10)const?marginBottom?=?parseFloat(window.getComputedStyle(firstEle).marginBottom,?10)this.$refs.iframe.height?=?`${rect.height?+?marginTop?+?marginBottom}px`})observer.observe(this.iframeDoc.body,?{?childList:?true?}) },使用 iframe 還存在一些局限性，最需要注意的一點就是由于 iframe 是獨立的窗體，那么渲染出來的組件只能封在這個窗體內，因此，像一些本應該是全局的 toast, modal, drawer 都會被局限在 iframe 內，無法覆蓋到全局上。
完整的代碼見：https://github.com/merfais/vue-demo/blob/main/src/views/customCode/mountSameIframe.vue[14]
完整的 demo 見：https://merfais.github.io/vue-demo/#/custom-code[15]
至此非跨域 iframe 渲染全部邏輯介紹完畢，接下來看一下跨域 iframe 的渲染。跨域 iframe 與非跨域 iframe 的渲染過程基本是一致的，只是有由于跨域，隔離的更徹底。其主要體現在主域與 iframe 域不能互相讀寫對方的文檔流 document。
此限制帶來的變化有以下幾點
依賴的資源需要提前內置在 iframe 內。
內置指的是將依賴的資源通過 script，link 標簽添加到 html 文件中，隨 html 一并加載。有一點還需要注意，如果掛載 vm 時需要依賴某些資源，需要添加資源加載的回調，加載成功后再通知主域掛載。
iframe 重新繪制需要各種元素操作只能由 iframe 自己完成
在非跨域 iframe 模式下所有的元素操作都在主域中完成，在跨域模式下這些操作和流程控制都需要以 script 編碼的方式內置在 html 內，在接到主域的掛載消息后，完整掛載過程。
主域與 iframe 的通信需要通過postMessage。
為了通用性，調用postMessage時可以設置origin = *，但由于接收 postMessage 消息通過?window.addEventListener("message", callback)這種通用的方式，可能會接受來自多個域的非期待的消息，因此，需要對通信消息定制特殊協議格式，防止出現處理了未知消息而發生異常。
兩者間通信是雙向的，主站向 iframe 只需傳遞一種消息，即含組件完整內容的掛載消息，iframe 接到消息后執行重繪渲染邏輯；iframe 向主站傳遞兩種消息，一是可以掛載的狀態消息，主站接到消息后執行首次渲染邏輯，即發送首次掛載消息，二是 body size 變化的消息，主站接到消息后修改 iframe 的尺寸。
在處理主域將組件內容通過postMessage傳給 iframe 時，碰到了一個棘手的問題，postMessage 對可傳遞的數據有限制，具體的限制可查看?The structured clone algorithm[16]，這個限制導致Function類型的數據無法傳過去，但組件很多功能需要使用函數才能實現，無法跨越這個限制，組件能力將損失過半或更甚。
對于這個限制的解決方案是：對不支持的數據類型進行序列化，轉成支持的類型，如 string，渲染時再反序列化回來。核心代碼如下
//?序列化 function?serialize(data)?{//?對象深度遞歸if?(Object.prototype.toString.call(data)?===?"[object?Object]")?{const?result?=?{};forEach(data,?(item,?key)?=>?{result[key]?=?this.serialize(item);});return?result;}if?(Array.isArray(data))?{return?data.map((item)?=>?this.serialize(item));}//?函數前后打上特殊標記后轉成stringif?(typeof?data?===?"function")?{return?encodeURI(`##${data.toString()}##`);}//?其他類型直接返回return?data; } //?反序列化 function?deserialize(data)?{//?對象深度遞歸if?(Object.prototype.toString.call(data)?===?"[object?Object]")?{const?result?=?{};Object.keys(data).forEach((key)?=>?{result[key]?=?this.deserialize(data[key]);});return?result;}if?(Array.isArray(data))?{return?data.map((item)?=>?this.deserialize(item));}//?string類型嘗試解析if?(typeof?data?===?"string")?{const?str?=?decodeURI(data);//?匹配特殊標記，匹配成功，反轉為functionconst?matched?=?str.match(/^##([^#]*)##$/);if?(matched)?{//?string轉成function可以用eval也可用new?Functionreturn?newFn(matched[1]);}return?data;}//?其他類型直接返回return?data; }序列化方案看似完美，其實也有諸多的不便，畢竟是一種降級，需要特別注意的一點是，閉包被破壞，或者說是不支持閉包函數，舉個例子:
computed:?{component()?{//?把代碼字符串轉成js對象const?result?=?safeStringToObject(this.js)if?(result.error)?{return?this.renderError({type:?'js腳本錯誤',msg:?result.error.toString(),})}//?...return?component}, }, methods:?{renderError({?type,?msg?})?{return?{//?這里用到了閉包，render函數使用了外層變量type和msg，//?renderError函數執行結束后這兩個變量并不會釋放，需等render函數執行后才會釋放render()?{return?<div?style='color:?red'><div>{type}</div><div>{msg}</div></div>}}}, },上面在生成 component 對象時調用了函數renderError，此函數返回了一個函數render，且使用了外層函數renderError的兩個參數，正常情況下運行是沒有問題的，type和msg的引用(引用計數)會等到render函數執行后才會釋放(引用計數清零)。
但 component 對象經過序列化后，其內部的函數被轉成了字符串，因而丟失了函數的所有特性，閉包也因此丟失，經反序列化回來后，雖然還原了函數，但閉包關系無法恢復，因此，這種寫法，在執行 render 時，type和msg兩個參數會變為undefined。
為了規避這種限制，應在導出 component 對象時避免使用含閉包的函數， 上例中的錯誤處理可通過以下方式解決
computed:?{component()?{//?把代碼字符串轉成js對象const?result?=?safeStringToObject(this.js)if?(result.error)?{const?template?=?this.genErrorTpl({type:?'js腳本錯誤',msg:?result.error.toString(),})return?{?template?}}//?...return?component}, }, methods:?{genErrorTpl({?type,?msg?})?{return?`<div?style='color:?red'><div>${type}</div><div>${msg}</div></div>`}, }完整的代碼見：
組件：https://github.com/merfais/vue-demo/blob/main/src/views/customCode/mountCrossIframe.vue[17]
iframe:?https://gitlab.com/merfais/static-page/-/blob/master/public/iframe.html[18]
完整的 demo 見：https://merfais.github.io/vue-demo/#/custom-code[19]
XSS 注入與安全
通常情況下，在需要將用戶輸入持久化的系統中，都要考慮 XSS 的注入攻擊，而防止注入的主要表現則是使用戶輸入的數據不被執行，或不能被執行。
而前文介紹的要支持用戶自定義組件的渲染，恰好就是要執行用戶代碼，可見，此功能勢必會帶來 XSS 注入風險。
因此，在使用此功能時要慎重，在不同的應用場景中，要根據系統的安全級別，選取相應的方案。對比以上四種方案（1 種動態組件，3 種動態掛載）可做以下選擇
在一些相對安全（允許 xss 注入，注入后沒有安全問題）的系統中，可以使用前三種方案中的任意一種，這三種都是可以通過注入獲取用戶 cookie 的。個人推薦使用第一種動態渲染方案，因為此方案靈活性和渲染完整度都是最高的。
在一些不太安全（xss 注入可能會泄露 cookie 中的身份信息）的系統中，推薦使用最后一種跨域組件掛載方案，通過完全隔離策略可以最大程度的降低風險，當然此方案也有很多的局限性。
參考資料
[1]
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。:?https://cn.vuejs.org/v2/guide/index.html#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88
[2]vue 的運行時 + 編譯器:?https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6
[3]官方的介紹:?https://learning.dcloud.io/#/?vid=2
[4]詳細看文檔:?https://cli.vuejs.org/zh/config/#runtimecompiler
[5]注冊組件:?https://cn.vuejs.org/v2/guide/components-registration.html
[6]render 函數:?https://cn.vuejs.org/v2/guide/render-function.html
[7]errorCaptured這個官方鉤子:?https://cn.vuejs.org/v2/api/index.html#errorCaptured
[8]https://github.com/merfais/vue-demo/blob/main/src/views/customCode/withComponent.vue:?https://github.com/merfais/vue-demo/blob/main/src/views/customCode/withComponent.vue
[9]https://merfais.github.io/vue-demo/#/custom-code:?https://merfais.github.io/vue-demo/#/custom-code
[10]所有的掛載元素會被 Vue 生成的 DOM 替換:?https://cn.vuejs.org/v2/api/#el
[11]Vue 錯誤傳播規則:?https://cn.vuejs.org/v2/api/#errorCaptured
[12]https://github.com/merfais/vue-demo/blob/main/src/views/customCode/withMount.vue:?https://github.com/merfais/vue-demo/blob/main/src/views/customCode/withMount.vue
[13]https://merfais.github.io/vue-demo/#/custom-code:?https://merfais.github.io/vue-demo/#/custom-code
[14]https://github.com/merfais/vue-demo/blob/main/src/views/customCode/mountSameIframe.vue:?https://github.com/merfais/vue-demo/blob/main/src/views/customCode/mountSameIframe.vue
[15]https://merfais.github.io/vue-demo/#/custom-code:?https://merfais.github.io/vue-demo/#/custom-code
[16]The structured clone algorithm:?https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
[17]https://github.com/merfais/vue-demo/blob/main/src/views/customCode/mountCrossIframe.vue:?https://github.com/merfais/vue-demo/blob/main/src/views/customCode/mountCrossIframe.vue
[18]https://gitlab.com/merfais/static-page/-/blob/master/public/iframe.html:?https://gitlab.com/merfais/static-page/-/blob/master/public/iframe.html
[19]https://merfais.github.io/vue-demo/#/custom-code:?https://merfais.github.io/vue-demo/#/custom-code
關注公眾號秋風的筆記，一個專注于前端面試、工程化、開源的前端公眾號
關注后回復簡歷獲取100+套的精美簡歷模板
關注后回復好友拉你進技術交流群+面試交流群
歡迎關注秋風的筆記
總結
以上是生活随笔為你收集整理的Vue隐藏技能：运行时渲染用户写入的组件代码！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 编程语言的宗教狂热和十字军东征
- 下一篇： vue swiper click失效