需求:动态获取一段字符串类型的js脚本,动态编译它并且可以完美在vue中运行与之交互。
实现:动态编译js的方式有eval和new function
简单例子:
eval:
let a = eval('1+2') // 3
new function:
let func = new Function('a,b','return a+b')
func(1,2) //3
显然后者更利于扩展,详细了解区别可以参考链接内容:
https://www.zhihu.com/question/29743491
https://imys.net/20151222/eval-with-new-function.html
要注意使用new Function,在vue环境中直接赋值的方式函数作用域与赋值vue结构对象不同:https://jsfiddle.net/5neLzn1x/
data(){
return {
p:10
}
},
methods:{
func(){
console.log('default')
}
},
mounted(){
this.func()
let func2 = new Function('a','console.log(this,this.p)')
this.func = new Function('a','console.log(this,this.p)')
func2()
this.func()
}
logs
网友评论