VUE中如何动态编译js

需求:动态获取一段字符串类型的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

你可能感兴趣的:(VUE中如何动态编译js)