检查 vue 实例是否已完成加载答案

【问题标题】：Check if vue instance has finished loading检查 vue 实例是否已完成加载
【发布时间】：2022-01-12 08:37:51
【问题描述】：

我正在尝试创建一个使用独立 vue2 的简单应用，

所以我的主要 html 看起来像这样：

main.php

<!DOCTYPE html>
<html>
    <head>
        <?php 
            include('header.html') //contains bootstrap, google fonts, etc(styles).
        ?>
    </head>

    <body>
        <div id="app">
            <h1> {{ test }} </h1>
        </div>


        <?php include('footer.html') ?>
    </body>
</html>

至于脚本，

footer.html

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script type="module">
    import vue from '<?php echo get_theme_file_uri( 'js/vue2.js' ); ?>';
</script>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

对于 vue 实例，

vue2.js

var app = new Vue({
    el: "#app",
    data: {
        test: 'It works!'
    }
});

export default app

问题在于，在 initial load 上，插值 {{ test }} 会在浏览器中逐字显示，而不是 test 的 It works! 值，然后继续正确显示（显示 It works! 值）几秒钟，这真的很烦人。

是否可以有一个加载回调来初始化 vue 实例？或者有什么方法可以避免这种情况？

【问题讨论】：

标签： vue.js

【解决方案1】：

你想要的是v-cloak。

在你的应用程序中使用该属性与一个隐藏任何标记的 css-class，然后 Vue 会在应用程序初始化时自动删除它。

[v-cloak] {
  display: none;
}

有关更多信息，请参阅文档：https://vuejs.org/v2/api/#v-cloak

或者看这个小提琴的例子：https://jsfiddle.net/mx014kgj/

【讨论】：

我知道这行得通，但由于某种原因它不是。顺便说一句，我正在创建一个 wordpress 页面模板。可能与wordpress有关？
属性是加载后没有删除还是还是可见？
没有任何变化，有/没有 v-cloak 都一样。
哦，我必须将
之后的所有内容都用<template></template>括起来
应该不需要模板标签。刚才用这个小提琴测试了它。 jsfiddle.net/mx014kgj