Vue之如何动态渲染.vue文件
动态渲染.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选项了。
- 点赞
- 收藏
- 关注作者
评论（0）