vue、angular、react等框架源码中是如何计算{{}}中的表达式的?
例如{{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,请问他们是怎么实现的?
本人实力有限无法通读源码进行理解,希望各位大佬可以提供帮助(●'◡'●)
结论:不管在vue还是react像
a + b
这种expression都是都是应普通的表达式求值的在vue中(带runtime编译的版本):
(1) 编译前
(2) 编译后
关键点就在这
createFunction
他用函数体的字符串用new Function(body)
构造出了render函数,之后该函数中代码都是以普通javascript正常执行的,只不过用with绑定了一个上下文变量,会在this上自动寻找相关属性在react中:
(1)编译前
(2)编译后
react中就更直白了,jsx就是javascript的语法糖,你自己手写React.createElement也是一样的效果不过比较麻烦