Vue之如何动态渲染.vue文件

最新推荐文章于 2024-08-15 16:42:09 发布

赵小左

最新推荐文章于 2024-08-15 16:42:09 发布

阅读量3.5k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_31281245/article/details/127371276

版权

vue 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

动态渲染.vue文件其实存在于很多地方，例如近期做的表单设计器就是其中一个，生成vue代码后，应用在其它地方。要求下载完vue文件在其它项目中引入即可使用。那么动态渲染.vue项目如何去做呢？

1. 我们需要一个模板页面，这个页面用来处理传递进来的代码，我们最后通过之前有说过的 extend 以及$mount 来进行实例化挂载。

那么，我们先第一步，创建一个动态渲染.vue的模板页面。

<!-- display.vue -->
<template>
  <div ref="display"></div>
</template>
<script>export default {
    props: {
      code: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        html: '',
        js: '',
        css: ''
      }
    },
  }

  </script>

在上述模板中，我们传入了一个code，这个code 指的就是外部传递给这个页面的动态.vue文件的内容。

那么，第二步我们则就是来处理传递进来的.vue文件里的内容（代码）。

2. 处理传入的.vue 文件内容

export default {
  methods: {
    getSource (source, type) {
      const regex = new RegExp(`<${type}[^>]*>`);
      let openingTag = source.match(regex);

      if (!openingTag) return '';
      else openingTag = openingTag[0];

      return source.slice(source.indexOf(openingTag) + openingTag.length, source.lastIndexOf(`</${type}>`));
    },
    splitCode () {
      const script = this.getSource(this.code, 'script').replace(/export default/, 'return ');
      const style = this.getSource(this.code, 'style');
      const template = '<div id="app">' + this.getSource(this.code, 'template') + '</div>';

      this.js = script;
      this.css = style;
      this.html = template;
    },
  }
}

在上述代码中，我们声明了两个方法，一个是 splitCode ,我们用来分隔传递进来的需要动态渲染的.vue文件的内容。在分割内容的时候为了方便，我们则单独封装了一个方法 getSource方法。这个方法接收两个参数。

source：.vue 文件代码，即 props: code；
type：分割的部分，也就是 template、script、style。

所以上述的splitCode的方法的目的就是，来分割出我们所需要的三个内容，分别为：模板文件（html）template，js ，css。

分割后，返回的内容不再包含等标签，直接是对应的内容，在 splitCode 方法中，把分割好的代码分别赋值给 data 中声明的 html、js、css。

有两个细节需要注意：

1. vue的 <script> 部分一般都是以export default 开始的，但是在上述splitCode中，我们把它替换成了return。这里我们需要注意，分割完的代码，仍然是字符串。

2. 在分割的外层套了一个 <div id="app"> ，这是为了容错，有时使用者传递的 code 可能会忘记在外层包一个节点，没有根节点的组件，是会报错的。

当我们准备好以上之后，就可以使用extend渲染组件了，但是在这之前，我们必须要注意到当前的this.js 是字符串，而extend的说法，接收的选项必须是一个对象类型。那么这时候我们就必须要先把this.js 转为一个对象。

我们在这里使用new Function 来进行转化，如下：

const sum = new Function('a', 'b', 'return a + b')
console.log(2, 6) // 8

new Function 的语法：

new Function ([arg1[, arg2[, ...argN]],] functionBody)

arg1, arg2, ... argN 是被函数使用的参数名称，functionBody 是一个含有包括函数定义的 JavaScript 语句的字符串。也就是说，示例中的字符串 return a + b 被当做语句执行了。

this.js 中是将 export default 替换为 return 的，如果将 this.js 传入 new Function 里，那么 this.js 就执行了，这时因为有 return，返回的就是一个对象类型的 this.js 了。

如果你还不是很理解 new Function，可以自行搜索其使用方法。除了 new Function，你熟悉的 eval 函数也可以使用，它与 new Function 功能类似。

所以目前的代码如下：

<template>
  <div ref="display"></div>
</template>
<script>import Vue from 'vue';
  
  export default {
    data () {
      return {
        component: null
      }
    },
    methods: {
      renderCode () {
        this.splitCode();

        if (this.html !== '' && this.js !== '') {
          const parseStrToFunc = new Function(this.js)();

          parseStrToFunc.template =  this.html;
          const Component = Vue.extend( parseStrToFunc );
          this.component = new Component().$mount();

          this.$refs.display.appendChild(this.component.$el);
        }
      }
    },
    mounted () {
      this.renderCode();
    }
  }

  </script>

extend 构造的实例通过 $mount 渲染后，挂载到了组件唯一的一个节点 <div ref="display">上。

到现在为止，html和 js 都有了，还剩下css，加载css 没有什么其它方法，就是创建一个<style>

标签，然后把css 放进去，再插入到前面的 <head> 中，这样css就被游览器给成功解析了，为了便于后面 this.code 变化或组件销毁时移除动态创建的 <style> 的标签，我们给每个style 标签都增加了一个随机ID 表示。

新建工具random_str.js 文件，并写入以下内容：

// 生成随机字符串
export default function (len = 32) {
  const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
  const maxPos = $chars.length;
  let str = '';
  for (let i = 0; i < len; i++) {
    str += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return str;
}

这个方法是从指定的 a-zA-Z0-9 中随机生成 32 位的字符串。

我们这时候可以补全之前的代码：

import randomStr from '../../utils/random_str.js';

export default {
  data () {
    return {
      id: randomStr()
    }
  },
  methods: {
    renderCode () {
      if (this.html !== '' && this.js !== '') {
        // ...
        if (this.css !== '') {
          const style = document.createElement('style');
          style.type = 'text/css';
          style.id = this.id;
          style.innerHTML = this.css;
          document.getElementsByTagName('head')[0].appendChild(style);
        }
      }
    }
  }
}

当 Display 组件销毁时，也要手动销毁 extend 创建的实例以及上面的 css：

export default {
  methods: {
    destroyCode () {
      const $target = document.getElementById(this.id);
      if ($target) $target.parentNode.removeChild($target);

      if (this.component) {
        this.$refs.display.removeChild(this.component.$el);
        this.component.$destroy();
        this.component = null;
      }
    }
  },
  beforeDestroy () {
    this.destroyCode();
  }
}

当 this.code 更新时，整个过程要重新来一次，所以要对 code 进行 watch 监听：

// display.vue，部分代码省略
export default {
  watch: {
    code () {
      this.destroyCode();
      this.renderCode();
    }
  }
}

以上就是我们动态渲染.vue文件的整个过程了。

此处各位伙伴还需要注意的是版本问题。

在vue2时候，有独立构建和运行时构建两种版本可以选择。

但是vue cli3 的时候，使用了vue.runtime.js 不允许编译template模板。因为我们在vue.extend构造实例的时候，用了 template 选项。所以会报错。所以，解决办法就是，对vue.config 做以修改。

// vue.config.js

module.exports = {
    runtimeCompiler: true
}

而它的意思就是，是否使用包含运行时编译器的Vue构建版本，设置为true后就可以在vue组件中使用 template选项了。

赵小左

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录