vue、angular、react等框架源码中是如何计算{{}}中的表达式的?

发布于 09-12 23:30 字数 312 浏览 10 评论 0

例如{{a+b}},已知a=10,b=20,此时如何输出30?

个人想到的方法是通过eval方法:

function fn(){
 const str = "{{a+b}}";
 const reg = /\{\{(.*)\}\}/;
 reg.test(str)
 const a = 10;
 const b = 20;
 return eval(RegExp.$1.trim())
}

但实际上在vue等源码中均未发现使用eval,请问他们是怎么实现的?
本人实力有限无法通读源码进行理解,希望各位大佬可以提供帮助(●'◡'●)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

迷途知返2022-09-19 23:30:14

结论:不管在vue还是react像 a + b这种expression都是都是应普通的表达式求值的

在vue中(带runtime编译的版本):

(1) 编译前
<div>
  <p></p>
</div>
(2) 编译后
function createFunction (code) {
  try {
    return new Function(code)
  } catch (err) {
    return noop
  }
}
const compiled = {
  render: `with(this){return _c('div',[_c('p',[_v(_s(name))])])}`
}
const res = {};
res.render = createFunction(compiled.render);

关键点就在这createFunction他用函数体的字符串用new Function(body)构造出了render函数,之后该函数中代码都是以普通javascript正常执行的,只不过用with绑定了一个上下文变量,会在this上自动寻找相关属性

在react中:

(1)编译前
const App = () => {
  const a = 1
  const b = 2
  return (
    <div>
      <p>ppp</p>
      {a + b}
    </div>
  );
};
(2)编译后
const App = function App() {
  var a = 1;
  var b = 2;
  return React.createElement(
    "div", 
    null, 
    React.createElement("p", null, "ppp"),
    a + b
  );
};

react中就更直白了,jsx就是javascript的语法糖,你自己手写React.createElement也是一样的效果不过比较麻烦

多情癖2022-09-19 23:30:14

React JSX是通过babel转换器实现的,JSX源码 -> babel transform -> JS代码
Angular和vue都是有自己的一套compiler,

vue的可以看这部分
https://github.com/vuejs/vue/...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文