Vue源码中为何使用new Function而不使用eval？

前言：eval的争议性

在JavaScript开发中，eval()函数一直备受争议。它允许我们执行字符串形式的代码，但同时也带来了安全风险和性能问题。令人惊讶的是，在Vue2源码中，我们确实能找到类似eval的技术（使用new Function()）。本文将深入探讨Vue为何做出这种选择，以及其中的权衡考量。

eval的核心问题回顾

javascript 复制代码

// 一个简单的eval示例
const userInput = "alert('恶意代码!')";
eval(userInput); // 安全风险！

eval的主要问题包括：

安全漏洞：执行任意代码的风险
性能损失：无法被JavaScript引擎优化
调试困难：难以追踪执行路径
作用域污染：可能意外修改当前作用域

Vue中的动态执行：为什么需要它？

在Vue2中，模板编译的核心需求是将模板字符串转换为可执行的渲染函数：

html 复制代码

<!-- Vue模板 -->
<div>{{ message }}</div>

需要转换为：

javascript 复制代码

// 渲染函数
function render() {
  with(this) {
    return _c('div', [_v(_s(message))])
  }
}

这种转换必须在运行时完成，因为模板是动态的、用户定义的。

Vue的解决方案：new Function()

Vue没有直接使用eval，而是选择了更安全的new Function()：

javascript 复制代码

// Vue源码中的实际实现（简化版）
const code = `with(this){return ${compiledTemplate}}`;
const renderFn = new Function(code);

为什么选择new Function而不是eval？

特性	eval	new Function
作用域	当前作用域	新函数作用域
安全性	低（访问所有局部变量）	较高（隔离作用域）
可优化性	极差	相对较好
执行上下文	当前上下文	独立上下文
严格模式	可能破坏	独立控制

实际Vue源码示例

在Vue2的源码中，我们可以看到这样的实现：

javascript 复制代码

// 实际Vue源码片段（src/compiler/to-function.js）
function createFunction(code, errors) {
  try {
    return new Function(code)
  } catch (err) {
    errors.push({ err, code })
    return noop
  }
}

替代方案分析：为什么不选择其他方式？

方案1：预编译（Vue推荐方式）

javascript 复制代码

// 通过vue-loader预编译的组件
export default {
  template: `<div>{{ message }}</div>`
  // 构建时被转换为：
  // render(h) { return h('div', this.message) }
}

优点：

最佳性能（无运行时编译开销）
最安全（无动态代码执行）
体积更小（无需包含编译器）

缺点：

需要构建步骤
开发环境调试体验略差

方案2：完全避免动态生成代码

javascript 复制代码

// 手动编写渲染函数
Vue.component('static-component', {
  render(h) {
    return h('div', this.message)
  }
});

优点：

最佳性能
完全避免动态执行风险

缺点：

开发效率低
可读性差（特别是复杂模板）
失去模板的优势

方案3：使用JavaScript表达式解析器

javascript 复制代码

// 自定义表达式解析器（简化示例）
const context = { message: "Hello" };
const expr = "message + ' World!'";

function evaluate(expr, context) {
  const keys = Object.keys(context);
  const values = keys.map(key => context[key]);
  return new Function(...keys, `return ${expr}`)(...values);
}

console.log(evaluate(expr, context)); // "Hello World!"

优点：

更安全（限制执行环境）
性能可控

缺点：

实现复杂
功能受限（无法支持完整JS语法）
仍需动态执行

Vue3的改进：预编译成为默认选择

Vue3做出了重要改变：

默认构建版本不包含模板编译器
推荐使用单文件组件 + 预编译
使用更优化的编译器架构

javascript 复制代码

// Vue3的编译结果（更高效、更可优化）
import { createVNode as _createVNode } from "vue"

export function render(_ctx) {
  return _createVNode("div", null, _ctx.message)
}

总结：权衡的艺术

方案	安全性	性能	灵活性	开发体验
运行时编译(new Function)	中	中	高	优
预编译	高	高	中	良
手写渲染函数	高	高	低	差
自定义解析器	高	中	中	中

Vue2选择new Function()进行运行时编译是因为：

需要在浏览器中支持即时编译
提供无构建步骤的使用体验
平衡灵活性、性能和开发体验

最佳实践建议

生产环境：始终使用预编译

bash 复制代码

# Vue CLI创建的项目默认使用预编译
vue create my-project

安全注意事项：

javascript 复制代码

// 绝对避免执行用户输入
// ❌ 危险操作！
new Function(userControlledString);

复杂表达式考虑替代方案：

javascript 复制代码

// 使用计算属性替代复杂表达式
computed: {
  formattedMessage() {
    return this.message + ' processed';
  }
}

升级到Vue3：享受更安全的架构和更好的性能

结语

动态代码执行在框架开发中是一个强大的工具，但也需要谨慎使用。Vue的设计选择体现了在灵活性、性能和安全性之间的精妙平衡。随着Vue3的普及，我们可以在享受Vue强大功能的同时，规避大多数动态执行的风险。

理解这些底层决策不仅能帮助我们成为更好的Vue开发者，也能让我们在面临类似权衡时做出更明智的选择。