Vue/Vue3自定义组件内嵌JavaScript代码无法执行问题求解

问题原因 #

Vue的模板解析机制默认会自动过滤模板中的<script>标签，目的是防范XSS注入攻击，因此直接写在template内的JS代码不会被解析执行。同时你代码中使用的document.write在页面DOM加载完成后调用会直接覆盖整个页面内容，会破坏已渲染的Vue实例，不建议在组件内使用。

解决方案 #

方案1：使用组件生命周期钩子执行逻辑（最推荐） #

如果要在组件渲染时自动执行JS代码，直接将逻辑写在组件的生命周期钩子中即可，Vue2使用mounted钩子，Vue3使用onMounted钩子。

Vue2 示例代码：

<head>
  <title></title>  
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <h3>this page works</h3>
    <div id="app">
        <myelement></myelement>
    </div>
</body>
<script>
    Vue.component("myelement",{
        template:`<h1>组件渲染完成</h1>`,
        // 组件挂载到DOM后自动执行
        mounted(){
            alert(1);
            // 不要用document.write，要插入内容可以操作组件根元素
            this.$el.insertAdjacentHTML('beforeend','<h1>Header from insertAdjacentHTML</h1>')
        }
    })
    var vm = new Vue({
        el:"#app"
    })
</script>

Vue3 示例代码：

<head>
  <title></title>  
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <h3>this page works</h3>
    <div id="app">
        <myelement></myelement>
    </div>
</body>
<script>
const app = Vue.createApp({})
app.component('myelement', {
  template: `<h1>组件渲染完成</h1>`,
  mounted() {
    alert(1)
    this.$el.insertAdjacentHTML('beforeend','<h1>Header from insertAdjacentHTML</h1>')
  }
})
app.mount('#app')
</script>

方案2：动态执行传入的JS字符串（仅适用于完全信任JS来源的场景） #

如果你的JS逻辑是动态获取的字符串，可以在生命周期钩子中用eval执行，注意eval存在安全风险，不可执行不可信来源的JS代码：

Vue.component("myelement",{
    template:`<h1>组件渲染完成</h1>`,
    props:['jsCode'],
    mounted(){
        // 执行传入的JS字符串
        eval(this.jsCode)
    }
})
// 使用组件时传入要执行的代码
<myelement js-code="alert(1);console.log('执行成功')"></myelement>

注意事项 #

• 不要在组件内使用document.write，页面加载完成后调用该方法会清空整个页面已渲染的内容，替换DOM请使用Vue响应式模板、insertAdjacentHTML或操作this.$el实现。
• 执行动态JS字符串前务必确认来源安全，避免XSS攻击。

内容的提问来源于stack exchange，提问作者Alex