美文网首页
VUE中如何动态编译js

VUE中如何动态编译js

作者: Leiyansen | 来源:发表于2018-01-22 11:23 被阅读0次

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

    需求:动态获取一段字符串类型的js脚本,动态编译它并且可以完美在vue中运行与之交互。实现:动态编译js的方式有e...

  • Vue.js 动态组件补充

    Vue.js官方文档动态组件部分有点模糊,稍作补充。 完善下官方文档提供的例子: 组件如何动态?区别于Vue.co...

  • vue--轮播图案例

    Vue里如何实现轮播图案例DOM css样式不做介绍了,主要是介绍如何在vue中完成js交互 JS

  • vue动态编译

    动态编译的需求:如在写一个表格组件时,我们可能需要表格的某一列是可定制化的,比如这一列可实现点击响应一个事件,要实...

  • vue 路由

    路由:动态的往根组件挂载不同的组件 安装vue-router 在mian.js 中引入并Vue.use('VueR...

  • 前端知识库 - 收藏集 - 掘金

    如何在 Vue.js 中使用第三方库 - 前端 - 掘金在诸多 Vue.js 应用中, Lodash, Momen...

  • You-Dont-Know-JS 笔记

    JS虽然是解释性语言, 但是也有编译过程, 只不过前一步编译, 后一步就执行 JS是动态语言, 意味着可以在变量中...

  • 迅为IMX6Q开发板-非设备树内核-单独编译内核驱动

    内核驱动不仅可以将驱动编译到内核中,还可以动态的编译内核驱动。本文档介绍如何以模块的方式编译内核驱动。 要动态的编...

  • 迅为4418开发板-驱动-以模块的方式编译内核驱动

    内核驱动不仅可以将驱动编译到内核中,还可以动态的编译内核驱动。本文档介绍如何以模块的方式编译内核驱动。 要动态的编...

  • 如何运行vue项目

    如何运行vue项目vue-clinpmnode.js vue.js如何打开已有的项目。自已折腾了一下,成功搭建好项...

网友评论

      本文标题:VUE中如何动态编译js

      本文链接:https://www.haomeiwen.com/subject/xnclaxtx.html