为什么脚本运行两次？

【问题标题】：Why is the script run twice?为什么脚本运行两次？
【发布时间】：2021-03-13 05:33:39
【问题描述】：

这是一个最小的例子：https://jsfiddle.net/kxbufL80/。

<main>
    <script type="application/javascript">console.log("Why twice?")</script>
</main>

以及如何防止这种情况发生？

【问题讨论】：

标签： vue.js

【解决方案1】：

包含<main> 和您的自定义<script> 的标记在加载页面时立即执行（甚至在Vue 运行之前），然后在Vue 挂载到<main> 时再次执行。

假设您无法将<script> 标记移到<main> 之外，解决方法是删除beforeCreate 挂钩中的<script>：

new Vue({
  el: "main",
  beforeCreate() {
    document.querySelector('main script').remove()
  }
})

然而，Vue 模板不应包含 <script> 开头的标签，并且开发版本应在浏览器控制台中警告您这一点。

【讨论】：