详解vue3的沙箱机制

前言

vue3 沙箱主要分两种

1. 浏览器编译版本，浏览器版本是使用with语法加上proxy代理拦截
2. 本地预编译版本，通过在模版预编译阶段转换阶段，使用转换插件transformexpression将非白名单标识符挂在在组件代理对象下

浏览器编译版本

render 函数编译结果

to

从上面的代码，我们能发现，变量标识符没有增加前缀，只是用with语法包裹了一下，延长作用域链，那么是如何做到 js 沙箱拦截的呢？例如变量test， 理论上说，当前作用域链没有test变量，变量会从上一层作用域查找，直到查找到全局作用域，但是，实际上只会在_ctx上查找， 原理很简单，_ctx是一个代理对象，那么我们如何使用proxy做拦截，示例代码如下：

代码很简单，为什么这么简单的代码就能做到拦截？ 因为 with 语句会触发 has 拦截，当 has 返回 true，就会 触发代理对象 get 拦截，如果返回 false， 则代理对象 get 拦截不会触发，变量不在当前代理对象查找，直接查找更上一层作用域

本地预编译版本

to

从上面的代码我们可以发现，非白名单标识符都添加了_ctx 变量前缀，那么是如何做到的呢？当本地编译 template 时，处于转换阶段时会对 变量表达式节点nodetypes.simple_expression进行添加前缀处理，示例代码如下：

当然上面的代码只是简化版本，原版插件还做了精确到了__props $setup，减短变量查询路径，提高性能，还有通过babel编译复杂表达式比如：箭头函数。

总结

整个 vue3 js 沙箱机制就解释结束了，当初浏览器编译版本困扰了我很久，因为不知道 has 可以拦截 with 语句变量查询

以上就是详解vue3的沙箱机制的详细内容，更多关于vue3 沙箱机制的资料请关注www.887551.com其它相关文章！