无构建步骤Vue应用如何将独立文件长模板作为计算属性使用

你当前用new Function手动枚举实例属性拼接模板的写法存在性能损耗、维护成本高的问题，以下是完全符合无构建要求、原生支持Vue模板语法的规范实现。

核心实现思路 #

直接使用Vue自带的运行时编译器（浏览器端直接引入的全量Vue版本默认自带该能力，无需额外依赖），提前将外部独立HTML文件的模板预编译为渲染函数，计算属性执行时绑定当前组件实例作为上下文，直接生成HTML字符串即可。
该方案不需要手动给模板内的变量/方法加this.前缀，支持完整的Vue模板语法（插值、v-if/v-for等指令、计算属性/方法调用），也不需要手动枚举实例上的data、computed、methods列表。

完整可运行代码 #

// 预加载独立存储的模板文件
const sheetTemplate = await (await fetch("sheet-template.html")).text();

const appSpec = {
  data() {
    return {
      // 原有INITIAL_DATA中的字段直接放在这里即可
    }
  },
  computed: {
    // 其他原有计算属性...
    html() {
      // 调用预编译的渲染函数，绑定当前实例上下文
      const vnode = this._sheetRender.call(this, this.$createElement);
      // 将虚拟节点转为静态HTML字符串返回
      return this._transformVNodeToHtml(vnode);
    }
  },
  methods: {
    // 其他原有方法...
    // 工具方法：递归将VNode转为HTML字符串
    _transformVNodeToHtml(vnode) {
      // 处理文本/数字节点
      if (typeof vnode === 'string' || typeof vnode === 'number') {
        return String(vnode);
      }
      // 处理注释节点
      if (vnode.isComment) return `<!--${vnode.text}-->`;
      
      let html = `<${vnode.tag}`;
      // 拼接节点属性
      if (vnode.data) {
        // 普通属性
        if (vnode.data.attrs) {
          Object.entries(vnode.data.attrs).forEach(([key, val]) => {
            html += ` ${key}="${String(val).replace(/"/g, '&quot;')}"`;
          });
        }
        // 内联样式
        if (vnode.data.style) {
          const styleStr = Object.entries(vnode.data.style)
            .map(([prop, val]) => `${prop.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}:${val}`)
            .join(';');
          html += ` style="${styleStr}"`;
        }
        // 类名
        if (vnode.data.class) {
          const classStr = Array.isArray(vnode.data.class) ? vnode.data.class.join(' ') : vnode.data.class;
          html += ` class="${classStr}"`;
        }
      }
      html += '>';

      // 递归处理子节点
      if (vnode.children?.length) {
        vnode.children.forEach(child => {
          html += this._transformVNodeToHtml(child);
        });
      }

      // 处理自闭合标签，可根据业务需求补充标签列表
      const voidElements = ['input', 'img', 'br', 'hr', 'meta', 'link', 'source'];
      if (!voidElements.includes(vnode.tag)) {
        html += `</${vnode.tag}>`;
      }
      return html;
    }
  },
  beforeCreate() {
    // 初始化时仅编译一次模板，避免重复编译的性能损耗
    this._sheetRender = Vue.compile(sheetTemplate).render;
  }
};

// 初始化应用
new Vue(appSpec).$mount('#app');

方案优势 #

• 完全无构建流程，仅依赖浏览器原生API和Vue内置能力，不需要引入任何第三方工具
• 独立模板文件支持完整Vue模板语法，和写在.vue文件单文件组件里的模板体验完全一致，不需要手动给变量加this.前缀
• 模板仅在应用初始化时编译一次，比原有每次计算属性触发都重新执行new Function的性能更好
• html是标准响应式计算属性，所有依赖的数据、计算属性、方法变更时都会自动更新，完全支持watcher监听
• 后续新增data字段、计算属性、方法时不需要修改编译逻辑，维护成本为0

轻量简化版（仅插值场景） #

如果你的模板只有{{ }}插值逻辑，没有v-if/v-for这类复杂指令，可以用更轻量的实现：

const sheetTemplate = await (await fetch("sheet-template.html")).text();
// 预编译模板，转成可直接执行的模板字符串格式
const compiledTpl = sheetTemplate
  .replace(/`/g, '\\`')
  .replace(/\$\{/g, '\\${')
  .replace(/\{\{\s*([^}]+?)\s*\}\}/g, '${$1}');

const appSpec = {
  // 其他配置和原有一致
  computed: {
    html() {
      // 绑定当前实例上下文，不需要手动写this
      with(this) {
        return eval(`\`${compiledTpl}\``);
      }
    }
  }
}

该方案不支持Vue指令，仅适合逻辑简单的纯插值模板场景。如果是Vue3项目，仅需要调整VNode属性读取逻辑适配Vue3的VNode结构即可，核心实现思路完全一致。

内容的提问来源于stack exchange，提问作者Lea Verou