VUE中如何动态编译js

JavaScript039

VUE中如何动态编译js,第1张

需求：动态获取一段字符串类型的js脚本，动态编译它并且可以完美在vue中运行与之交互。

实现：动态编译js的方式有eval和new function

简单例子：

eval：

new function:

显然后者更利于扩展，详细了解区别可以参考链接内容：

https://www.zhihu.com/question/29743491

https://imys.net/20151222/eval-with-new-function.html

要注意使用new Function，在vue环境中直接赋值的方式函数作用域与赋值vue结构对象不同： https://jsfiddle.net/5neLzn1x/

1. 可以通过el.__vfrag__.scope 获取到当前节点上绑定的Vue对象。

例如：

const clipboard = new Clipboard('.anticons-list li')

clipboard.on('success', (e) =>{

const item = e.trigger.__vfrag__.scope.item

item.justCopied = true

setTimeout(() =>{

item.justCopied = false

}, 1000)

})

2. 通过vm.$compile 动态编译模板

例如：

const template = `

<animation

:show="visible"

:on-leave="_onAnimateLeave"

:transition-name="popupTransitionName">

<div>(*^__^*)</div>

</animation>

`

compiled () {

const div = document.createElement('div')

div.innerHTML = template

this.$compile(div)

document.body.appendChild(div)

},