Vue隐藏技能：运行时渲染用户写入的组件代码！

我就是我 2022-10-31 15:54 134阅读 0赞

作者：还没想好

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\]。

此时我们就有了一个运行时编译环境

#### 第二步：把用户的代码注册到系统中 ####

把代码渲染出来有两个方案

1.  通过 注册组件\[5\] 的方式，把代码注册为 vue 实例的组件，注册组件又分 全局注册 和 局部注册 两种方式
2.  通过挂载点直接挂载 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 的容器，容器负责渲染用户的代码，使用地方把容器挂上就行了。

*  容器核心代码

export default {
      name: "customCode",
      props: {
        template: String, // template模板
        js: String, // js逻辑
        css: String, // css样式
      },
      computed: {
        className() {
          // 生成唯一class，主要用于做scoped的样式
          const uid = Math.random().toString(36).slice(2);
          return `custom-code-${uid}`;
        },
        scopedStyle() {
          if (this.css) {
            const scope = `.${this.className}`;
            const regex = /(^|\})\s*([^{]+)/g;
            // 为class加前缀，做类似scope的效果
            return this.css.trim().replace(regex, (m, g1, g2) => {
              return g1 ? `${g1} ${scope} ${g2}` : `${scope} ${g2}`;
            });
          }
          return "";
        },
        component() {
          // 把代码字符串转成js对象
          const component = safeStringToObject(this.js);
    
          // 去掉template的前后标签
          const template = (this.template || "")
            .replace(/^ *< *template *>|<\/ *template *> *$/g, "")
            .trim();
    
          // 注入template或render，设定template优先级高于render
          if (this.template) {
            component.template = this.template;
            component.render = undefined;
          } else if (!component.render) {
            component.render = "<div>未提供模板或render函数</div>";
          }
    
          return component;
        },
      },
      render() {
        const { component } = this;
        return (
          <div class={this.className}>
            <style>{this.scopedStyle}</style>
            <component />
          </div>
        );
      },
    };

*  容器使用

以上只是核心的逻辑部分，除了这些，在项目实战中还应考虑容错处理，错误大致可以分两种

1.  用户代码语法错误
    
    主要是 js 部分，对于 css 和 template 的错误，浏览器有一定的纠错的机制，不至于崩了。
    
    这部分的处理主要借助于`safeStringToObject`这个函数，如果有语法错误，则返回 Error，处理一下回显给用户，代码大致如下
    
        // component对象在result.value上取，如果result.error有值，则代表出现了错误
        component() {
          // 把代码字符串转成js对象
          const result = safeStringToObject(this.js)
        
          const component = result.value
          if (result.error) {
            console.error('js 脚本错误', result.error)
            result.error = {
              msg: result.error.toString(),
              type: 'js脚本错误',
            }
            result.value = { hasError: true }
            return result
          }
        
          // ...
        
          retrun result
        }
2.  组件运行时错误
    
    既然把 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.component
      const error = compileErr || this.subCompErr
      let errorDom
      if (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
          // ...
          // 注入mixins
          component.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`对象进行渲染，但也有些许的区别，动态实例比动态组件需要多考虑以下几点：

1.  需要一个稳定的挂载点
    
    从 vue2.0 开始，vue 实例的挂载策略变更为，所有的挂载元素会被 Vue 生成的 DOM 替换\[10\]，在此策略下，一旦执行挂载，原来的 DOM 就会消失，不能再次挂载。但我们需要实现代码变更后能够重新渲染，这就要求挂载点要稳定存在，解决方案是对用户的 template 进行注入，每次渲染前，在 template 外层包一层带固定 id 的 DOM
2.  运行时错误捕获`errorCaptured`需要注入到`component`对象上，不再需要注入`beforeUpdate`钩子
    
    因为通过`new Vue()`的方式创建了一个新的 vm 实例，不再是容器组件的子组件，所以容器组件上的`errorCaptured`无法捕获新 vm 的运行时错误，`new Vue(component)`中参数 component 是顶层组件，根据 Vue 错误传播规则\[11\] 可知，在非特殊控制的情况下，顶层的 `errorCaptured` 会捕获到错误
3.  首次挂载需要制造一定的延迟才能渲染
    
    由于挂载点含在 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 的方式，这样更具备通用性，可以用于任意的站点。核心代码如下

由于是位于同域，主站与 iframe 可以互相读取 window 和 document 引用，因为，可以动态加载资源，核心代码如下

methods: {
      mountResource() {
        // 添加依赖的css
        appendLink('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.contentDocument
      this.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优先级高于render
          if (template) {
            component.template = template
            component.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 = true
              this.mountCode()
            })
          }
        },
      },
      methods: {
        mountCode() {
          // 添加css
          const css = this.component.css
          delete this.component.css
          removeElement(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.Vue
          new Vue(this.component).$mount('#app')
        },
      },

注意点：

1.  iframe 的渲染到文档流后才能添加依赖资源，依赖资源加载完才能执行 vm 的挂载，首次加载时需要控制时序
2.  vm 挂载点的重建采用了永远添加在 body 的第一个子元素的方式，这么做的原因是一些第三方的库（如 ant-design-vue）也会向 body 中动态添加 element，虽然采用`docment.body.innerHTML=''`的方式可以快速且干净的清空 body 内容，但也会将第三方库添加的内容给干掉，导致第三方库全部或部分不可用。
3.  为了使 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.firstElementChild
        const 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。

此限制带来的变化有以下几点

1.  依赖的资源需要提前内置在 iframe 内。
    
    内置指的是将依赖的资源通过 script，link 标签添加到 html 文件中，随 html 一并加载。有一点还需要注意，如果挂载 vm 时需要依赖某些资源，需要添加资源加载的回调，加载成功后再通知主域挂载。
2.  iframe 重新绘制需要各种元素操作只能由 iframe 自己完成
    
    在非跨域 iframe 模式下所有的元素操作都在主域中完成，在跨域模式下这些操作和流程控制都需要以 script 编码的方式内置在 html 内，在接到主域的挂载消息后，完整挂载过程。
3.  主域与 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));
      }
      // 函数前后打上特殊标记后转成string
      if (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);
        // 匹配特殊标记，匹配成功，反转为function
        const matched = str.match(/^##([^#]*)##$/);
        if (matched) {
          // string转成function可以用eval也可用new Function
          return 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+套的精美简历模板
 *  关注后回复`好友`拉你进技术交流群+面试交流群
 *  欢迎关注`秋风的笔记`