为什么脚本要运行两次？

Question

下面是一个很小的例子：https://jsfiddle.net/kxbufL80/。

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

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

Answer 1

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

假设您不能将<script>标记移出<main>之外，解决方法是删除beforeCreate钩子中的<script>：

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

更新小提琴

但是，Vue模板首先不应该包含<script>标记，开发构建应该在浏览器控制台中警告您这一点。